现在的位置: 首页 > 综合 > 正文

获取兼容的DOM子节点

2013年05月23日 ⁄ 综合 ⁄ 共 994字 ⁄ 字号 评论关闭

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

抱歉!评论已关闭.