介紹幾個js DOM的常用方法

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供寧江網(wǎng)站建設、寧江做網(wǎng)站、寧江網(wǎng)站設計、寧江網(wǎng)站制作等企業(yè)網(wǎng)站建設、網(wǎng)頁設計與制作、寧江企業(yè)網(wǎng)站模板建站服務，十多年寧江做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡服務。

獲取元素節(jié)點 getElementById    getElementsByTagName    getElementsByClassName

先寫一個簡單的網(wǎng)頁做測試：

/*
　　test.html
*/



 
 


 
這段的id是contentId。
 
這段的class name是contentClass。

1.  getElementById 

　1.先定義變量 var contentId = document.getElementById("contentId");

　2.然后輸出對象 contentId 就返回id為 contentId  的元素對象（

）。見下圖：

2.  getElementsByTagName  

   1.還是先定義變量  var contentTag = document.getElementsByTagName("p"); 

　2.接著我輸出 contentTag ，它返回 HTMLCollection [ , ] 共兩個，一個以#開頭表示id，另一個以.開頭表示Class name。

　3.繼續(xù) contentTag[0]  輸出

　contentTag[1] 輸出

由此可知 getElementsByTagName   返回的是數(shù)組！

3.  getElementsByClassName 

 　1. var contentClass = document.getElementsByClassName("contentClass");

　 2. contentClass 輸出 HTMLCollection [ ] 返回一個元素對象數(shù)組，即使只有一個。

　 3. contentClass[0] 輸出

我們常用的還有 getAttribute，setAttribute，ChildNodes, nodeType, nodeValue, firstChild, lastChild 方法獲取一些信息。

4.分別用 getAttribute 和 setAttribute 獲取和設置屬性：

改變style屬性后：

5.那么這是childNOdes：

也就是說，

那如果是呢？

nodeType 的值有12種，常用的也就三種：1表示元素節(jié)點，2表示屬性節(jié)點，3表示文本節(jié)點。

nodeValue 不僅可以獲取文本節(jié)點的值，還可以改變文本節(jié)點的值。

js的dom方法還有好多，可以看看這個W3school JS參考手冊，相信對初學者有很大幫助。

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持創(chuàng)新互聯(lián)！