欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript中的DOM和Timer的基本操作

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

JavaScript中的DOM和Timer基本操作

DOM操作

傳統(tǒng)的選擇器

選擇器id

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

例如：

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

選擇id為test的標(biāo)簽

選擇器class

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

例如：

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

選擇class為test的標(biāo)簽

選擇器標(biāo)簽名

var elements = document.getElementsByTagName(標(biāo)簽名);

例如：

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

選擇p標(biāo)簽(傳回?cái)?shù)組)

包羅萬(wàn)象的select（css）選擇器(H5)

簡(jiǎn)單的選擇格式 .id #class 標(biāo)簽名 [屬性]

單選

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

例如：

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

選擇一個(gè)a標(biāo)簽的target屬性

多選

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

例如：

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

選擇所有class為title的屬性

標(biāo)簽元素的操作

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

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

例如：

element.textContent = "hello";

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

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

element.innerHTML = 替換的html代碼;

例如：

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

把該標(biāo)簽位該為<h1>hello</h1>

獲取同級(jí),父子元素

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

修改元素類名id名

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

對(duì)元素樣式進(jìn)行修改(css相同)：

列舉幾個(gè)（其他的樣式同理）

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

EVENT操作(兩種方式，以點(diǎn)擊為例)

一：調(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定時(shí)器

延時(shí)定時(shí)器

執(zhí)行時(shí)延時(shí)一定的時(shí)間才開(kāi)始執(zhí)行

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

例如：

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

間隔定時(shí)器

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

啟動(dòng)定時(shí)器

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

例如：

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

關(guān)閉定時(shí)器

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

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

相關(guān)文章

最新評(píng)論