[js高手之路] dom常用节点属性兼容性详解与应用
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[js高手之路] 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常用节点属性兼容性详解与应用的主要内容,如果未能解决你的问题,请参考以下文章
[js高手之路] dom常用APIappendChild,insertBefore,removeChild,replaceChild,cloneNode详解与应用
[js高手之路] dom常用APIappendChild,insertBefore,removeChild,replaceChild,cloneNode详解与应用
[js高手之路] dom常用APIappendChild,insertBefore,removeChild,replaceChild,cloneNode详解与应用