js常用DOM方法詳解
介紹幾個(gè)js DOM的常用方法
獲取元素節(jié)點(diǎn) getElementById getElementsByTagName getElementsByClassName
先寫一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)做測(cè)試：
/* test.html */ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body> <p id="contentId" style="width:500px; height: 30px;background-color: #ccc">這段的id是contentId。</p> <p class="contentClass" style="width:500px; height: 30px;background-color: #ccc">這段的class name是contentClass。</p> </body> </html>
1. getElementById
1.先定義變量 var contentId = document.getElementById("contentId");
2.然后輸出對(duì)象 contentId 就返回id為 contentId 的元素對(duì)象（ <p id="contentId" style="width:500px; height: 30px;background-color: #ccc"> ）。見下圖：
2. getElementsByTagName
1.還是先定義變量 var contentTag = document.getElementsByTagName("p");
2.接著我輸出 contentTag ，它返回 HTMLCollection [ <p#contentId>, <p.contentClass> ] 共兩個(gè)，一個(gè)以#開頭表示id，另一個(gè)以.開頭表示Class name。
3.繼續(xù) contentTag[0] 輸出 <p id="contentId" style="width:500px; height: 30px;background-color: #ccc">
contentTag[1] 輸出 <p class="contentClass" style="width:500px; height: 30px;background-color: #ccc">
由此可知 getElementsByTagName 返回的是數(shù)組！
3. getElementsByClassName
1. var contentClass = document.getElementsByClassName("contentClass");
2. contentClass 輸出 HTMLCollection [ <p.contentClass> ] 返回一個(gè)元素對(duì)象數(shù)組，即使只有一個(gè)。
3. contentClass[0] 輸出 <p class="contentClass" style="width:500px; height: 30px;background-color: #ccc">
我們常用的還有 getAttribute，setAttribute，ChildNodes, nodeType, nodeValue, firstChild, lastChild 方法獲取一些信息。
4.分別用 getAttribute 和 setAttribute 獲取和設(shè)置屬性：
改變style屬性后：
5.那么這是childNOdes：
也就是說(shuō)， <p></p> 在遇到塊元素時(shí)，塊元素之間會(huì)有一個(gè)換行符 <br> ,瀏覽器在查找子節(jié)點(diǎn)時(shí)會(huì)將它視為一個(gè)文本節(jié)點(diǎn)。從圖中也可以看出 childNodes 返回的也是數(shù)組。
那如果是<p#contentId>呢？
nodeType 的值有12種，常用的也就三種：1表示元素節(jié)點(diǎn)，2表示屬性節(jié)點(diǎn)，3表示文本節(jié)點(diǎn)。
nodeValue 不僅可以獲取文本節(jié)點(diǎn)的值，還可以改變文本節(jié)點(diǎn)的值。
js的dom方法還有好多，可以看看這個(gè)W3school JS參考手冊(cè)，相信對(duì)初學(xué)者有很大幫助。
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！
相關(guān)文章
構(gòu)造函數(shù)就是初始化一個(gè)實(shí)例對(duì)象，對(duì)象的prototype屬性是繼承一個(gè)實(shí)例對(duì)象。本文給大家分享javascript構(gòu)造函數(shù)詳解，對(duì)js構(gòu)造函數(shù)相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2015-12-12
iFrame小應(yīng)用2008-12-12
Js+XML 操作...2006-09-09
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)返回頂部按鈕，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
IE不出現(xiàn)Flash激活框的小發(fā)現(xiàn)的js實(shí)現(xiàn)方法
IE不出現(xiàn)Flash激活框的小發(fā)現(xiàn)的js實(shí)現(xiàn)方法...2007-09-09
使用原生JavaScript實(shí)現(xiàn)放大鏡效果
這篇文章主要為大家詳細(xì)介紹了如何使用原生JavaScript實(shí)現(xiàn)放大鏡效果（可自由大小適配），文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下2023-03-03
JS逆向之如何一招徹底解決selenium?WebDriver無(wú)響應(yīng)
Selenium Webdriver是一款強(qiáng)大的自動(dòng)化測(cè)試工具,用于模擬真實(shí)用戶在瀏覽器中的交互行為,下面這篇文章主要給大家介紹了關(guān)于JS逆向之如何一招徹底解決selenium?WebDriver無(wú)響應(yīng)的相關(guān)資料,需要的朋友可以參考下2024-07-07
用javascript實(shí)現(xiàn)XML的解析的實(shí)現(xiàn)代碼，需要的朋友可以參考下。2009-11-11
實(shí)例詳解ECMAScript5中新增的Array方法
這篇文章主要介紹了實(shí)例詳解ECMAScript5中新增的Array方法的相關(guān)資料,需要的朋友可以參考下2016-04-04
本文主要介紹了js實(shí)現(xiàn)登錄驗(yàn)證碼的方法，代碼簡(jiǎn)潔明了，具有很好的參考價(jià)值，需要的朋友一起來(lái)看下吧2016-12-12