javascript Nodelist和HTML Collection的区别

最新推荐文章于 2024-04-17 09:39:01 发布

啊啊啊～～

最新推荐文章于 2024-04-17 09:39:01 发布

阅读量347

点赞数

分类专栏： js Collection NodeList 文章标签： javascript html css

本文链接：https://blog.csdn.net/qq_40891322/article/details/109246437

版权

js 同时被 3 个专栏收录

23 篇文章 0 订阅

订阅专栏

Collection

1 篇文章 0 订阅

订阅专栏

NodeList

1 篇文章 0 订阅

订阅专栏

javascript Nodelist和HTML Collection的区别

1.简介

NodeList 对象是一个从文档中获取的节点列表 (集合) 。
NodeList 对象类似 HTMLCollection 对象。
一些旧版本浏览器中的方法（如：getElementsByClassName()）返回的是 NodeList 对象，而不是 HTMLCollection 对象。
所有浏览器的 childNodes 属性返回的是 NodeList 对象。
大部分浏览器的 querySelectorAll() 返回 NodeList 对象。
childNodes是NodeList类型的，而children则是HTMLCollection类型的。

2.演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Collection和NodeList的区别</title>
</head>
<body>
    <div id="mydiv" style="width: 300px;height: 300px;background-color: mediumslateblue;">
        <p>第一个为段落</p>
        <a>第二个为超链接</a>
        <p>第三个为段落</p>
        <script>
            // test.childNodes是NodeList类型的，而test.children则是HTMLCollection类型的。
            var test = document.getElementById("mydiv");
            console.log(test.childNodes);
            console.log(test.children);
        </script>
    </div>
    
</body>
</html>

控制台输出为：
在这里插入图片描述

3.区别

DOM 节点
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
1.整个文档是一个文档节点
2.每个 HTML 元素是元素节点
3.HTML 元素内的文本是文本节点
4.每个 HTML 属性是属性节点
5.注释是注释节点

Nodelist是一种类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点。可以通过‘childNodes’和‘document.querySelectorAll’来获取。通过‘childNodes’来获取的该对象是‘动态集合’，也就是之后DOM结构的变态会反应在该对象里；但‘document.querySelectorAll’获取的该对象是‘静态集合’，也就意味着随后对DOM结构的任何改动都不会影响集合的内容。当你选择如何遍历NodeList中所有项，或缓存列表长度的时候，最好牢记这种区分。访问Nodelist对象可以使用方括号或者item()方法，没有什么特别的区别，但要把Arayy类型的方法应用在该对象（除了forEach方法）正常情况直接用是不可以的，所以得变通一下，例如使用call,bind等方法。

HTMLCollection对象和Nodelist对象非常类似，作为一个动态集合，它能根据DOM结构的变动随时更新。与Nodelist对象区别在于：

Nodelist对象包含的是节点，HTMLCollection只能包含元素（元素节点）。
但HTMLCollection对象提供了更方便的方法来访问生成的实例，那就是namedItem(‘str’)，这里输入相应的str字符串可以在实例中找到对应的元素节点。当存在多个相同name时，他只会返回相应的第一个元素节点，而且有时name特性和id特性一样，也就是id写的值也可以用这个方法获取到。当然你也可以使用像数组一样的写法来使用，当方括号里的参数是数字时表示为索引，调用item()；当方括号里的参数时字符串时，调用namedItem()；这些都是浏览器提供的便利性操作。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>test</title>
</head>
<body>
  <div class="test">
    <p class="p1">Hello</p>
    <p class="p2">World</p>
    <a href="www.baidu.com">baidu</a>
    <script>
        test = document.getElementsByClassName('test')[0];

        childNodes = test.childNodes;
        children = test.children;

        console.log(childNodes);
        console.log(children);

        p = document.createElement('p');
        test.appendChild(p);

        console.log(childNodes);
        console.log(children);
    </script>
  </div>
</body>
</html>

在这里插入图片描述

啊啊啊～～

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
javascript Nodelist和HTML Collection的区别

javascript Nodelist和HTML Collection的区别1.简介NodeList 对象是一个从文档中获取的节点列表 (集合) 。NodeList 对象类似 HTMLCollection 对象。一些旧版本浏览器中的方法（如：getElementsByClassName()）返回的是 NodeList 对象，而不是 HTMLCollection 对象。所有浏览器的 childNodes 属性返回的是 NodeList 对象。大部分浏览器的 querySelectorAll() 返
复制链接

扫一扫