JavaScript中的DOM和Timer的基本操作
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);關(guān)閉定時器
clearInterval(定時器id); ··· ```javascript clearInterval(timerid); ···
到此這篇關(guān)于JavaScript中的DOM和Timer(簡單易用的基本操作)的文章就介紹到這了,更多相關(guān)js dom和timer操作內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
js對數(shù)組中的數(shù)字從小到大排序?qū)崿F(xiàn)代碼
對數(shù)組中的數(shù)字從小到大排序,很多時候需要用的多,需要的朋友可以參考下2012-09-09
JavaScript中變量提升與函數(shù)提升經(jīng)典實例分析
這篇文章主要介紹了JavaScript中變量提升與函數(shù)提升,結(jié)合實例形式分析了JavaScript中的變量提升與函數(shù)提升相關(guān)原理、使用方法及操作注意事項,需要的朋友可以參考下2018-07-07
js實現(xiàn)html table 行,列鎖定的簡單實例
下面小編就為大家?guī)硪黄猨s實現(xiàn)html table 行,列鎖定的簡單實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
javascript檢測是否聯(lián)網(wǎng)的實現(xiàn)代碼
這篇文章主要介紹了javascript檢測是否聯(lián)網(wǎng)的實現(xiàn)代碼,需要的朋友可以參考下2014-09-09
css+js實現(xiàn)部分區(qū)域高亮可編輯遮罩層
下面介紹我在項目中實現(xiàn)的方式,全屏遮罩,部分區(qū)域可操作,需要的朋友可以參考下2014-03-03

