用children获取子节点在浏览器中的差异

获取某一个节点在整个节点组中是第几个索引

function getIndex(id){

     var children=id.parentNode.children;

         for(var i=0;i<children.length;i++){

            if(id==children[i])

               return i;

         }

    };

用这种方法获取的索引值在IE8-下比firefox大一,后依次输出每个结点发现在IE8-下第一个结点输出[object HTML CommentElement],原来html代码里的注释没删除,下面是HTML代码,原来IE8-获取子节点时不会忽略注释结点。

<ul >

 <!-- <li > Item</li>-->

            <li> Item1</li>

                <li> Item2</li>

                <li>Item3</li>

  </ul>

顺便说一下children和childNodes的区别:

   children 获取不包括空白节点。上面的HTML用IE8-解析,那么<ul>元素会有4个结点。在IE9+和firefox下会得到3个结点。

   childNodes获取所有子节点,这些子节点可能是元素、文本节点、注释或处理命令。

上面的HTML用IE8-解析,那么<ul>会有4个子节点,在IE9+和firefox下会得到9个结点,包括3个<li>元素、一个注释结点、5个文本节点(表示空白符)。

posted @ 2013-08-22 20:53  hy小辣椒  Views(297)  Comments(0)    收藏  举报