浏览器对于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>