js中firstChild与firstElementChild及childNodes与children的区别

最新推荐文章于 2022-05-09 15:27:46 发布

sai小懒

最新推荐文章于 2022-05-09 15:27:46 发布

阅读量2.3k

点赞数 2

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_44731369/article/details/113835443

版权

JavaScript 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

firstChild：
获取指定元素的第一个子节点 (包括元素节点和文本节点) 。

若父元素与第一个子元素之间存在空白节点，firstChild 获取到的将是空白节点而不是第一个子元素。这时可以使用 firstElementChild 属性 (IE6/7/8 中不支持)。
例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <ul>
            <li>111111 first</li>
            <li>111111</li>
            <li>111111</li>
            <li>111111</li>
            <li>111111</li>
        </ul>
        <script>
            var ul = document.getElementsByTagName("ul")[0];

            alert(ul.firstChild.innerHTML);     // undefined
            alert(ul.firstElementChild.innerHTML);     // 111111 first
        </script>
    </body>
</html>

firstElementChild：
获取指定元素的第一个子元素节点 (不包括文本节点)

childNodes：
返回指定元素的子元素集合，包括html节点，所有属性，文本 (nodeType==1是元素节点，2是属性节点，3是文本节点)。代码中的换行、空格会增加文本节点，因此用它来返回真正的子节点会不准确。
可以通过增加一个节点判断过程来获取准确的子节点：

function childs(element) {
    var nodes = element.childNodes;
    var arr = new Array();

    for (let i = 0; i < nodes.length; i++) {
        if (nodes[i].nodeType == 1) {
            arr[arr.length] = nodes[i];
        }
    }

    return arr;
}

// 按照上面的例子
alert(ul.childNodes.length);       // 11，存在空白节点
alert(childs(ul).length);        // 5，准确

除了IE9和Firefox，其他浏览器都支持通过 childNodes[i] 获取第 i 个子节点。推荐以后使用 children 方法来替代 childNodes。

children：
指DOM Object类型的子对象，返回指定元素的子元素集合 (只包括元素节点，不包括文本节点)，且在IE中包含注释节点。
除了IE9和Firefox，其他浏览器都支持通过 children[i] 获取第 i 个子节点。

sai小懒

关注

2
点赞
踩
15

收藏

觉得还不错? 一键收藏
1
评论
js中firstChild与firstElementChild及childNodes与children的区别

firstChild：获取指定元素的第一个子节点 (包括元素节点和文本节点) 。若父元素与第一个子元素之间存在空白节点，firstChild 获取到的将是空白节点而不是第一个子元素。这时可以使用 firstElementChild 属性 (IE6/7/8 中不支持)。例：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <met
复制链接

扫一扫

专栏目录