关于NodeList的实时和静态问题

来源：4-13 -HTMLCollection和NodeList有什么区别

hwjhuvbj

2022-04-05

老师，我看网上有人总结说NodeList是静态集合，不会响应获取之后的修改，但又说可以响应节点内部的修改，我试了一下在appendChild前后打印ul.childNodes的长度，确实发生了变化。那NodeList的静态体现在哪呢？
参考链接：https://juejin.cn/post/6977000721938022407

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    </style>
</head>
<body>
<ul id="box">
    <li>123</li>
</ul>
<script>
    const ul = document.getElementById('box');
    const child_nodes = ul.childNodes;
    console.log(child_nodes.length); 
    ul.appendChild(document.createElement('li'));
    console.log(child_nodes.length);
</script>
</body>
</html>

写回答

1回答

双越

2022-04-05

你测试的结果就说明：childNodes 是动态的。

双越

hwjhuvbj

NodeList 只是一个数据类型，有很多 API 可以返回 NodeList 类型，例如 document.querySelectorAll 也是返回 NodeList 。静态还是动态，不是取决于数据类型，而是取决于 API 。你可以试试 document.querySelectorAll 是静态还是动态，自己测试一下。

2022-04-06

共2条回复

2周刷完100道前端优质面试真题双越最新力作

『前端面试真题100道』视频详解

1509 学习 · 642 问题

查看课程

相似问题

关于ts的问题

回答 1

虚拟列表是面试中的高频问题

回答 2

关于不可变值

回答 1

二叉树追问

回答 1

老师，实际工作中是不是有封装好的SDK可以直接使用啊

回答 1

打开慕课网App查看更多内容