JavaScript中的DOM和Timer的基本操作
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)文章希望大家以后多多支持腳本之家!
- java中常見(jiàn)XML解析器的使用詳解(JAXP,DOM4J,Jsoup,JsoupXPath)
- JS監(jiān)聽(tīng)dom高度變化幾種常用方法總結(jié)
- js獲取dom元素寬高的幾種方法
- javascript?DOM?querySelectorAll()?使用方法
- jsp有兩個(gè)按鈕來(lái)控制Timer的開(kāi)始和結(jié)束方法
- 詳解Nodejs的timers模塊
- 在JavaScript中使用timer示例
- TimergliderJS 一個(gè)基于jQuery的時(shí)間軸插件
- JavaScript Timer實(shí)現(xiàn)代碼
- javascript 寫的一個(gè)簡(jiǎn)單的timer
相關(guān)文章
微信小程序?qū)崿F(xiàn)隨機(jī)驗(yàn)證碼功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)隨機(jī)驗(yàn)證碼功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-12-12
JavaScript中檢測(cè)變量是否存在遇到的一些問(wèn)題
要檢測(cè)某一變量是否存在,雖然簡(jiǎn)單但是也要細(xì)心,下面整理了幾點(diǎn),遇到類似問(wèn)題的朋友可以參考下2013-11-11
a標(biāo)簽置灰不可點(diǎn)擊的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇a標(biāo)簽置灰不可點(diǎn)擊的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
js對(duì)數(shù)組中的數(shù)字從小到大排序?qū)崿F(xiàn)代碼
對(duì)數(shù)組中的數(shù)字從小到大排序,很多時(shí)候需要用的多,需要的朋友可以參考下2012-09-09
JavaScript中變量提升與函數(shù)提升經(jīng)典實(shí)例分析
這篇文章主要介紹了JavaScript中變量提升與函數(shù)提升,結(jié)合實(shí)例形式分析了JavaScript中的變量提升與函數(shù)提升相關(guān)原理、使用方法及操作注意事項(xiàng),需要的朋友可以參考下2018-07-07
js實(shí)現(xiàn)html table 行,列鎖定的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇js實(shí)現(xiàn)html table 行,列鎖定的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
javascript檢測(cè)是否聯(lián)網(wǎng)的實(shí)現(xiàn)代碼
這篇文章主要介紹了javascript檢測(cè)是否聯(lián)網(wǎng)的實(shí)現(xiàn)代碼,需要的朋友可以參考下2014-09-09
css+js實(shí)現(xiàn)部分區(qū)域高亮可編輯遮罩層
下面介紹我在項(xiàng)目中實(shí)現(xiàn)的方式,全屏遮罩,部分區(qū)域可操作,需要的朋友可以參考下2014-03-03

