liu溜溜

福建人在广州

##JavaScript中的childNodes和children节点

1、childNodes属性是用来获取任何一个元素的所有子元素,它是包含一个元素全部子元素的数组。返回元素节点、属性节点和文本节点。

  • (极端情况):html的body中什么都不写;
<body></body>
window.onload = function (){
    var oBody = document.getElementsByTagName('body')[0];
    var aChild = oBody.childNodes;
    alert(aChild.length);    //1
};

body元素默认有一个文本节点,如果在里面直接写文本,值仍为1。

  • 如果添加两个div元素:
<body><div></div><div></div></body>

值为3,2个元素节点和一个文本节点(文本节点可以通过nodeType属性值为3确认)。

  • 空格和换行符都会被解释为节点
<body>
     <div></div>
     <div></div>
     <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

节点数为7

  • 利用nodeType输出body子节点的所有类型
    for(var i = 0; i < aChild.length; i++) {
        alert(aChild[i].nodeType); //3 1 3 1 3 1 3
        }

2 、children 只返回 元素节点

    var oBody = document.getElementsByTagName('body')[0];
    var aChild = oBody.children;

上述childNodes属性输出为7的情况下,利用children输出为3(只包含元素节点)

3、两者的不同

childNodes:不同浏览器获取不同

IE:    只获取元素节点;
非IE:获取元素节点与文本节点;
解决方案:if(childNode.nodeName=="#text") continue 或者 if(childNode.nodeType != '3') continue 

children:不同浏览器都是获取元素节点。
阅读更多
个人分类: JavaScript
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

##JavaScript中的childNodes和children节点

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭