[js高手之路] dom常用节点属性兼容性详解与应用

一、每个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_NODE1ATTRIBUTE_NODE2TEXT_NODE3CDATA_SECTION_NODE4ENTITY_REFERENCE_NODE5ENTITY_NODE6PROCESSING_INSTRUCTION_NODE7COMMENT_NODE8DOCUMENT_NODE9DOCUMENT_TYPE_NODE10DOCUMENT_FRAGMENT_NODE11NOTATION_NODE12

其中，最常用的是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 >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需要使用数组方法，他不能直接调用，需要转成数组方式

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 < 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 >12         <p></p>13         <p></p>14         <p></p>15         <p></p>16         <p></p>17         <p></p>18     </div>