亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

JavaScript中的DOM和Timer的基本操作

 更新時間：2024年10月14日 09:33:08   作者：ClownLMe  
掌握JavaScript中的DOM操作可通過id、class、標簽名及CSS選擇器進行元素選擇和內(nèi)容修改,Timer定時器功能包括設置延時和間隔執(zhí)行,詳細介紹了事件處理器和事件監(jiān)聽函數(shù)的使用,以及避免事件覆蓋的建議

JavaScript中的DOM和Timer基本操作

DOM操作

傳統(tǒng)的選擇器

選擇器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標簽(傳回數(shù)組)

包羅萬象的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的屬性

標簽元素的操作

修改標簽文本內(nèi)容(以文本的方式輸出)

element.textContent = 文本內(nèi)容;

例如：

element.textContent = "hello";

把該標簽的文本內(nèi)容改為hello

修改標簽文本內(nèi)容(以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操作(兩種方式，以點擊為例)

一：調(diào)用事件處理器

···javascript
element.事件處理器 = 事件回調(diào)函數(shù);

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

二：調(diào)用事件函數(shù)

···javascript
element.addEventListener(事件名,事件的回調(diào)函數(shù));

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

ps：調(diào)用事件處理器可能出現(xiàn)事件覆蓋的情況，建議第二種

timer定時器

延時定時器

執(zhí)行時延時一定的時間才開始執(zhí)行

setTimeout(回調(diào)函數(shù),延時時間(ms));

例如：

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

間隔定時器

每隔一定的時間執(zhí)行一次

啟動定時器

setInterval(回調(diào)函數(shù),延時時間(ms));

例如：

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

關閉定時器

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

到此這篇關于JavaScript中的DOM和Timer(簡單易用的基本操作)的文章就介紹到這了,更多相關js dom和timer操作內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論