JavaScript中的DOM和Timer(簡單易用的基本操作)

ClownLMe發表於2024-10-13
JavaScript

JavaScript中的DOM和Timer基本操作

DOM操作

傳統的選擇器

選擇器id

var elements = document.getElementById(id的名稱);

例如：

var elements = document.getElementById("test");

選擇id為test的標籤

選擇器class

var elements = document.getElementsByClassName(class的名稱);

例如：

var elements = document.getElementsByClassName("test");

選擇class為test的標籤

選擇器標籤名

var elements = document.getElementsByTagName(標籤名);

例如：

var elements = document.getElementsByClassName("p");

選擇p標籤(傳回陣列)

包羅永珍的select（css）選擇器(H5)

簡單的選擇格式 .id #class 標籤名 [屬性]

單選

var element = document.querySelector(css選擇的格式);

例如：

var elements = document.querySelector("a[target]");

選擇一個a標籤的target屬性

多選

var element = document.querySelectorAll(css選擇的格式);

例如：

var elements = document.querySelectorAll("#title");

選擇所有class為title的屬性

標籤元素的操作

修改標籤文字內容(以文字的方式輸出)

element.textContent = 文字內容;

例如：

element.textContent = "hello";

把該標籤的文字內容改為hello

修改標籤文字內容(以html的方式輸出)

element.innerHTML = 替換的html程式碼;

例如：

element.textContent = "<h1>hello</h1>";

把該標籤位該為<h1>hello</h1>

獲取同級,父子元素

//獲取父元素：
var parent = element.parentNode;
//獲取子元素：
var child = element.children;
//獲取同級上一個元素：
var previous = element.previousElementSibling;
//獲取同級下一個元素：
var next = element.nextElementSibling;

修改元素類名id名

//修改id名

//修改類名
element.className = "new-class";
//修改id名
element.id = "new-id";

對元素樣式進行修改(css相同)：

列舉幾個（其他的樣式同理）

//修改寬高背景顏色
element.style.backgroundColor = "red";
element.style.width = "200px";
element.style.height = "100px";
//......

EVENT操作(兩種方式，以點選為例)

一：呼叫事件處理器

···javascript
element.事件處理器 = 事件回撥函式;

例如:
···javascript
element.onclick = function() {
  //你要執行的事件
  console.log("Clicked!");
};

二：呼叫事件函式

···javascript
element.addEventListener(事件名,事件的回撥函式);

例如：
···javascript
element.addEventListener("click",function(){
  //你要執行的事件
  console.log("Clicked!");
});

ps：呼叫事件處理器可能出現事件覆蓋的情況，建議第二種

timer定時器

延時定時器

執行時延時一定的時間才開始執行

setTimeout(回撥函式,延時時間(ms));

例如：

setTimeout(function() {
    console.log("Timeout!");
}, 1000);

間隔定時器

每隔一定的時間執行一次

啟動定時器

setInterval(回撥函式,延時時間(ms));

例如：

var timerid = setInterval(function() {
    console.log("Timeout!");
}, 1000);

關閉定時器

clearInterval(定時器id);
···
```javascript
clearInterval(timerid);
···

相關文章