获取兼容的DOM子节点
浏览器对于DOM节点识别并非都是一致的,主要分为两个阵营,ie浏览器和非ie浏览器。(刚刚试了一下,ie9对DOM的识别好像和非ie一样了)。
ie只把标签识别为节点,回车等文本符并不视为节点。而非ie把回车也视为一个节点。那怎么获取的的节点,在不同浏览器看来,都一样呢。看看下面的例子,大家就明白了。
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>获取兼容的子节点</title><meta name="Keywords" content=""><meta name="Description" content=""><style type="text/css">li{list-style:none;}.bc{border:1px blue solid;font-size:20px;margin:20px;}</style></head><body> <ul id="all"> <li></li> <li></li> <li></li> <li></li> <li></li> </ul><script type="text/javascript"><!-- /*检测dom在不同浏览器中的识别情况*/ var child=document.getElementById("all").childNodes;//获取ul下所有的节点,标签、注释、文本(包括回车)等都是节点。 document.write("<p class='bc'>"+child.length+"</p>");//节点的个数,兼容问题:ie==>5;非ie浏览器==>11
/*获取兼容的dom节点*/ var childs=getChilds(document.getElementById("all")); document.write("<p class='bc'>"+childs.length+"</p>");
function getChilds(node){ var child=node.childNodes; var result=[]; for(var i=0;i<child.length;i++){ if(child[i].nodeType==1){ result.push(child[i]); } } return result; }</script></body></html>
TAG: