javascript基础学习系列二百三十：使用NodeList

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

完美句号

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

阅读量920

点赞数 19

文章标签： javascript 学习开发语言原型模式前端性能优化软件工程

本文链接：https://blog.csdn.net/wanmeijuhao/article/details/135814599

版权

本文详细解释了NodeList对象、NamedNodeMap和HTMLCollection在DOM编程中的作用，强调了实时性带来的问题和解决方案，以及MutationObserver接口如何实现异步观察DOM变化。还讨论了如何避免NodeList无限循环和优化查询性能。

摘要由CSDN通过智能技术生成

理解 NodeList 对象和相关的 NamedNodeMap、HTMLCollection，是理解 DOM 编程的关键。这 3 个集合类型都是“实时的”，意味着文档结构的变化会实时地在它们身上反映出来，因此它们的值始终代表最新的状态。实际上，NodeList 就是基于 DOM 文档的实时查询。例如，下面的代码会导致无穷循环:

   let divs = document.getElementsByTagName("div");
    for (let i = 0; i < divs.length; ++i){
      let div = document.createElement("div");
      document.body.appendChild(div);
}

第一行取得了包含文档中所有

元素的 HTMLCollection。因为这个集合是“实时的”，所以任何时候只要向页面中添加一个新

元素，再查询这个集合就会多一项。因为浏览器不希望保存每次创建的集合，所以就会在每次访问时更新集合。这样就会出现前面使用循环的例子中所演示的问题。每次循环开始，都会求值 i < divs.length。这意味着要执行获取所有

元素的查询。因为循环体中会创建并向文档添加一个新

元素，所以每次循环 divs.length 的值也会递增。因为两个值都会递增，所以 i 将永远不会等于 divs.length。
使用 ES6 迭代器并不会解决这个问题，因为迭代的是一个永远增长的实时集合。以下代码仍然会导致无穷循环:

   for (let div of document.getElementsByTagName("div")){
      let newDiv = document.createElement("div");
      document.body.appendChild(newDiv);
}

任何时候要迭代 NodeList，最好再初始化一个变量保存当时查询时的长度，然后用循环变量与这个变量进行比较，如下所示:

   let divs = document.getElementsByTagName("div");
    for (let i = 0, len = divs.length; i < len; ++i) {
      let div = document.createElement("div");
      document.body.appendChild(div);
    }

在这个例子中，又初始化了一个保存集合长度的变量 len。因为 len 保存着循环开始时集合的长度，而这个值不会随集合增大动态增长，所以就可以避免前面例子中出现的无穷循环。本章还会使用这种技术来演示迭代 NodeList 对象的首选方式。
另外，如果不想再初始化一个变量，也可以像下面这样反向迭代集合:

   let divs = document.getElementsByTagName("div");
    for (let i = divs.length - 1; i >= 0; --i) {
      let div = document.createElement("div");
      document.body.appendChild(div);
    }

一般来说，最好限制操作 NodeList 的次数。因为每次查询都会搜索整个文档，所以最好把查询到的 NodeList 缓存起来。

MutationObserver接口

不久前添加到 DOM 规范中的 MutationObserver 接口，可以在 DOM 被修改时异步执行回调。使用 MutationObserver 可以观察整个文档、DOM 树的一部分，或某个元素。此外还可以观察元素属性、子节点、文本，或者前三者任意组合的变化。

注意新引进MutationObserver接口是为了取代废弃的MutationEvent。

2 MutationObserver 的实例要通过调用 MutationObserver 构造函数并传入一个回调函数来创建: 3
let observer = new MutationObserver(() => console.log(‘DOM was mutated!’));

1. observe()方法

新创建的 MutationObserver 实例不会关联 DOM 的任何部分。要把这个 observer 与 DOM 关联起来，需要使用 observe()方法。这个方法接收两个必需的参数:要观察其变化的 DOM 节点，以及一个 MutationObserverInit 对象。 5
MutationObserverInit 对象用于控制观察哪些方面的变化，是一个键/值对形式配置选项的字典。例如，下面的代码会创建一个观察者(observer)并配置它观察元素上的属性变化:

let observer = new MutationObserver(() => console.log('<body> attributes changed'));
   observer.observe(document.body, { attributes: true });

执行以上代码后，元素上任何属性发生变化都会被这个 MutationObserver 实例发现，然后就会异步执行注册的回调函数。元素后代的修改或其他非属性修改都不会触发回调进入任务队列。可以通过以下代码来验证:

let observer = new MutationObserver(() => console.log('<body> attributes changed'));
    observer.observe(document.body, { attributes: true });
  document.body.className = 'foo';
console.log('Changed body class'); 9
    // Changed body class
    // <body> attributes changed

注意，回调中的 console.log()是后执行的。这表明回调并非与实际的 DOM 变化同步执行。

2. 回调与 MutationRecord

每个回调都会收到一个 MutationRecord 实例的数组。MutationRecord 实例包含的信息包括发生了什么变化，以及 DOM 的哪一部分受到了影响。因为回调执行之前可能同时发生多个满足观察条件的事件，所以每次执行回调都会传入一个包含按顺序入队的 MutationRecord 实例的数组。
下面展示了反映一个属性变化的 MutationRecord 实例的数组:

let observer = new MutationObserver(
(mutationRecords) => console.log(mutationRecords)); observer.observe(document.body, { attributes: true });
    document.body.setAttribute('foo', 'bar');
    // [
    //   {
    //     addedNodes: NodeList [],
// } // ]
attributeName: "foo",
attributeNamespace: null, nextSibling: null, oldValue: null, previousSibling: null removedNodes: NodeList [], target: body
type: "attributes"

完美句号

关注

19
点赞
踩
30

收藏

觉得还不错? 一键收藏
0
评论
javascript基础学习系列二百三十：使用NodeList

理解 NodeList 对象和相关的 NamedNodeMap、HTMLCollection，是理解 DOM 编程的关键。这 3 个集合类型都是“实时的”，意味着文档结构的变化会实时地在它们身上反映出来，因此它们的值始终代表最新的状态。实际上，NodeList 就是基于 DOM 文档的实时查询。第一行取得了包含文档中所有元素的 HTMLCollection。因为这个集合是“实时的”，所以任何时候只要向页面中添加一个新元素，再查询这个集合就会多一项。
复制链接

扫一扫