[js高手之路] dom常用節點屬性相容性詳解與應用

一、每個DOM節點都有一個nodeType屬性，表示節點型別， NodeType一共有12種型別，我們可以透過遍歷內建的Node建構函式獲取

 1          window.onload = function(){
 2             var str = "";
 3             for( var key in Node ){
 4                 str += "";
 5                 str += "";
 6                 str += "";
 7             }
 8             str += "
" + key + "
" + Node[key] + "
";
 9             document.body.innerHTML = str;
10         }

ELEMENT_NODE 1
ATTRIBUTE_NODE 2
TEXT_NODE 3
CDATA_SECTION_NODE 4
ENTITY_REFERENCE_NODE 5
ENTITY_NODE 6
PROCESSING_INSTRUCTION_NODE 7
COMMENT_NODE 8
DOCUMENT_NODE 9
DOCUMENT_TYPE_NODE 10
DOCUMENT_FRAGMENT_NODE 11
NOTATION_NODE 12
其中，最常用的是1(元素節點) 和 3( 文字節點 ).可以結合childNodes做一個簡單的應用

1         window.onload = function(){
 2             var oUl = document.getElementById("box");
 3             var cNodeList = oUl.childNodes;
 4             for( var i = 0, len = cNodeList.length; i 
10         
11111
11         
22222
12         
33333
13     

上例，給li加背景顏色, childeNodes在chrome和FF下會區分元素節點和文字節點. 所以為了在chrome和FF下加上背景顏色，

需要nodeType = 1判斷為元素節點，才能加上背景顏色

二、nodeName和nodeValue屬性

如果是元素, nodeName就是標籤名稱, nodeValue為null， 如果是文字節點，自然就是空

1         window.onload = function(){
2             var oUl = document.getElementById("box");
3             var cNodeList = oUl.childNodes;
4             for( var i = 0, len = cNodeList.length; i 

三、每個節點都有一個childNodes屬性，儲存的是當前節點下面的所有子節點，其中儲存著一個nodeList物件，nodeList是一種類陣列結構，

有兩種方法可以獲取需要的子元素

陣列索引
item方法

1 var oUl = document.getElementById("box");
2 var cNodeList = oUl.childNodes;
3 console.log( cNodeList[0] );
4 console.log( cNodeList.item(0) );

如果這個nodeList需要使用陣列方法，他不能直接呼叫，需要轉成陣列方式

console.log( cNodeList.slice( 0, 1 ) ); 這樣使用，會報錯. 應該先轉成陣列，可以採用以下兩種方式:

1  // var aNode = [].slice.call( cNodeList, 0 );
2 var aNode = Array.prototype.slice.call( cNodeList, 0 );
3 console.log( aNode );

在IE8及其更老的版本，不支援這兩種方式，只能使用for迴圈遍歷

1             try {
2                 var aNode = [];
3                 aNode = Array.prototype.slice.call( cNodeList, 0 );
4             } catch( e ){
5                 for( var i = 0, len = cNodeList.length; i 

四、兄弟節點、第一個子節點、最後一個子節點、父節點(parentNode)，子節點(children)

這裡一個有4組屬性，IE和Chrome,FF支援的屬性分別如下

在IE下是支援firstChild,lastChild,nextSibling,previousSibling

在Chrome和FF下支援: firstElementChild,lastElementChild,nextElementSibling,previousElementSibling

如果需要相容，我們可以採用短路表示式：

1 window.onload = function(){
 2             var aDiv = document.getElementsByTagName( "div" );
 3             (aDiv[2].previousElementSibling || aDiv[2].previousSibling).style.color = 'red';
 4             (aDiv[1].nextElementSibling || aDiv[1].nextSibling).style.color = 'green';
 5             (document.body.firstElementChild || document.body.firstChild).style.color = 'blue';
 6             (document.body.lastElementChild || document.body.lastChild).style.color = 'orange';
 7 }
 8 
 9 
ghostwu1
10 
ghostwu2
11 
ghostwu3
12 
ghostwu4

parentNode的小應用，隱藏當前a元素對應的li元素

1         window.onload = function(){
 2             var aHref = document.getElementsByTagName("a");
 3             for( var i = 0, len = aHref.length; i 
11        



12        



13        



14    

children的小應用，隔行變色

1         window.onload = function(){
 2             var oDiv = document.querySelector("#box");
 3             var aP = oDiv.children;
 4             aP = [].slice.call(aP);
 5             aP.forEach(function( el, key ) {
 6                 el.style.backgroundColor = ( key % 2 == 0 ? 'red' : 'green' );
 7             }, this);
 8         }
 9 
10 
11     

12         

13         

14         

15         

16         

17         

18