一、每個DOM節點都有一個nodeType屬性,表示節點類型, NodeType一共有12種類型,我們可以通過遍歷內置的Node構造函數獲取
1 window.onload = function(){ 2 var str = "<table>"; 3 for( var key in Node ){ 4 str += "<tr>"; 5 str += "<td>" + key + "</td><td>" + Node[key] + "</td>"; 6 str += "</tr>"; 7 } 8 str += "</table>"; 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 < len; i++ ){ 5 cNodeList[i].nodeType == 1 ? cNodeList[i].style.backgroundColor = 'red' : ''; 6 } 7 } 8 9 <ul id="box"> 10 <li>11111</li> 11 <li>22222</li> 12 <li>33333</li> 13 </ul>
上例,給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 < len; i++ ){ 5 console.log( cNodeList[i].nodeName, cNodeList[i].nodeValue ); 6 } 7 }
三、每個節點都有一個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需要使用數組方法,他不能直接調用,需要轉成數組方式
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 < len; i++ ){ 6 aNode.push( cNodeList[i] ); 7 } 8 } 9 console.log( aNode );
四、兄弟節點、第一個子節點、最后一個子節點、父節點(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 <div>ghostwu1</div> 10 <div>ghostwu2</div> 11 <div>ghostwu3</div> 12 <div>ghostwu4</div>
parentNode的小應用,隱藏當前a元素對應的li元素
1 window.onload = function(){ 2 var aHref = document.getElementsByTagName("a"); 3 for( var i = 0, len = aHref.length; i < len; i++ ){ 4 aHref[i].onclick = function(){ 5 this.parentNode.style.display = 'none'; 6 } 7 } 8 } 9 10 <ul> 11 <li><a href="javascript:;">1111</a><a href="javascript:">隱藏</a></li> 12 <li><a href="javascript:;">2222</a><a href="javascript:;">隱藏</a></li> 13 <li><a href="javascript:;">3333</a><a href="javascript:;">隱藏</a></li> 14 </ul>
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 <div id="box"> 12 <p></p> 13 <p></p> 14 <p></p> 15 <p></p> 16 <p></p> 17 <p></p> 18 </div>