断舍离,永远去做你余生最重要的那件事

首页前端开发正文

childnodes和children的区别

朱绪2017-06-051833JavaScript

childnodes和children的区别在哪里?

下面我就随便举一个例子来比较一下吧:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload=function(){
            var oUl = document.getElementById("list");
            var childNodesLen = oUl.childNodes.length;
            var childrenLen = oUl.children.length;
            alert("childNodes的长度是:"+childNodesLen+"\n"+"children的长度是:"+childrenLen);
        }
    </script>
</head>
<body>
    <ul id="list">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</body>
</html>

浏览器预览效果如下:

childnodes和children的区别

下面我来分析一下:

children.length获取的是元素节点的长度,很明显返回结果是3,这个肯定是没啥疑问的。

childNodes.length获取的是子节点的长度,返回结果为啥是7呢?

实际上对于ul元素来讲,childNodes包含3个子元素节点和4个子文本节点。

我们不难发现,每一个li元素都处在不同行,每一个换行符都是一个空白节点,javascript会把这些空白节点当成文本节点来处理。

我们数一下就知道是4个换行符,因为每一个换行符都是一个空白节点,那就是4个子文本节点啦。