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

標籤：dom節點屬性   dom   dom節點相容   

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

window.onload = function(){            var str = "<table>";            for( var key in Node ){                str += "<tr>";                str += "<td>" + key + "</td><td>" + Node[key] + "</td>";                str += "</tr>";            }            str += "</table>";            document.body.innerHTML = str;        }

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做一個簡單的應用

window.onload = function(){            var oUl = document.getElementById("box");            var cNodeList = oUl.childNodes;            for( var i = 0, len = cNodeList.length; i < len; i++ ){                cNodeList[i].nodeType == 1 ? cNodeList[i].style.backgroundColor = ‘red‘ : ‘‘;            }        }    <ul id="box">        <li>11111</li>        <li>22222</li>        <li>33333</li>    </ul>

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

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

二、nodeName和nodeValue屬性

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

window.onload = function(){            var oUl = document.getElementById("box");            var cNodeList = oUl.childNodes;            for( var i = 0, len = cNodeList.length; i < len; i++ ){                console.log( cNodeList[i].nodeName, cNodeList[i].nodeValue );            }        }

三、每個節點都有一個childNodes屬性，儲存的是當前節點下面的所有子節點，其中儲存著一個nodeList對象，nodeList是一種類數組結構，

有兩種方法可以擷取需要的子項目

• 數組索引

• item方法

var oUl = document.getElementById("box");var cNodeList = oUl.childNodes;console.log( cNodeList[0] );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迴圈遍曆

try {                var aNode = [];                aNode = Array.prototype.slice.call( cNodeList, 0 );            } catch( e ){                for( var i = 0, len = cNodeList.length; i < len; i++ ){                    aNode.push( cNodeList[i] );                }            }            console.log( aNode );

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

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

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

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

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

window.onload = function(){            var aDiv = document.getElementsByTagName( "div" );            (aDiv[2].previousElementSibling || aDiv[2].previousSibling).style.color = ‘red‘;            (aDiv[1].nextElementSibling || aDiv[1].nextSibling).style.color = ‘green‘;            (document.body.firstElementChild || document.body.firstChild).style.color = ‘blue‘;            (document.body.lastElementChild || document.body.lastChild).style.color = ‘orange‘;}<div>ghostwu1</div><div>ghostwu2</div><div>ghostwu3</div><div>ghostwu4</div>

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

window.onload = function(){            var aHref = document.getElementsByTagName("a");            for( var i = 0, len = aHref.length; i < len; i++ ){                aHref[i].onclick = function(){                    this.parentNode.style.display = ‘none‘;                }            }        }    <ul>       <li><a href="javascript:;">1111</a><a href="javascript:">隱藏</a></li>       <li><a href="javascript:;">2222</a><a href="javascript:;">隱藏</a></li>       <li><a href="javascript:;">3333</a><a href="javascript:;">隱藏</a></li>   </ul>

children的小應用，隔行變色

window.onload = function(){            var oDiv = document.querySelector("#box");            var aP = oDiv.children;            aP = [].slice.call(aP);            aP.forEach(function( el, key ) {                el.style.backgroundColor = ( key % 2 == 0 ? ‘red‘ : ‘green‘ );            }, this);        }    <div id="box">        <p></p>        <p></p>        <p></p>        <p></p>        <p></p>        <p></p>    </div>

本文出自 “ghostwu” 部落格，請務必保留此出處http://ghostwu.blog.51cto.com/11192807/1958998

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