js:MutationObserver监视 DOM 节点的变化

简介: js:MutationObserver监视 DOM 节点的变化

MutationObserver 接口提供了监视对 DOM 树所做更改的能力。它被设计为旧的 Mutation Events 功能的替代品,该功能是 DOM3 Events 规范的一部分。

文档

兼容性

image.png

示例

<div id="some-id"></div>
<script>
  // 选择需要观察变动的节点
  const targetNode = document.getElementById("some-id");
  // 观察器的配置(需要观察什么变动)
  const config = {
    attributes: true, // 观察属性变动
    childList: true,  // 观察目标子节点的变化,是否有添加或者删除
    subtree: true,    // 观察后代节点
  };
  // 当观察到变动时执行的回调函数
  const callback = function (mutationsList, observer) {
    for (let mutation of mutationsList) {
      console.log(mutation);
      if (mutation.type === "childList") {
        console.log("A child node has been added or removed.");
      } else if (mutation.type === "attributes") {
        console.log(mutation.attributeName);
      }
    }
  };
  // 创建一个观察器实例并传入回调函数
  const observer = new MutationObserver(callback);
  // 以上述配置开始观察目标节点
  observer.observe(targetNode, config);
  // 之后,可停止观察
  //   observer.disconnect();
</script>



相关文章
|
11天前
|
JavaScript
DOM 属性列表(命名节点图 Named Node Map)
`DOM`中的`Named Node Map`是元素节点属性的列表,自动更新增删操作。代码示例载入&quot;books.xml&quot;,获取第一个`&lt;book&gt;`元素的属性列表,`x.length`显示属性数量,`x.getNamedItem(&quot;category&quot;).nodeValue`输出&quot;category&quot;属性值,如&quot;cooking&quot;,并显示属性总数1。
|
11天前
|
XML JavaScript 数据格式
DOM 节点列表长度(Node List Length)
`length`属性用于获取DOM节点列表的元素数量。在示例中,代码加载&quot;books.xml&quot;,然后通过`getElementsByTagName(&quot;title&quot;)`获取所有标题节点。使用`for`循环遍历这些节点,输出每个标题的文本内容。这个例子展示了如何交互式地处理XML文档中的特定标签。
|
5天前
|
JavaScript
DOM 节点列表长度(Node List Length)
`length`属性用于获取DOM节点列表的元素数量。通过遍历这个属性,如`for (i=0; i&lt;x.length; i++)`,可以访问和处理每个节点。在示例中,代码加载&quot;books.xml&quot;,然后获取所有&quot;title&quot;节点,并打印它们的第一个子节点的值。
|
2天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
该文介绍了XML DOM遍历节点树的概念,通过循环或移动在节点树中操作。示例展示了如何遍历XML文档,提取每个元素的名称和值。代码实例加载XML字符串到xmlDoc,获取根元素子节点,并输出它们的名称及文本值。
|
6天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
该文介绍了如何遍历XML文档的节点树。通过循环移动,可以访问并处理每个元素,例如提取值。示例代码展示了一个实例,它加载XML字符串到`xmlDoc`,然后遍历根元素的所有子节点,打印出节点名及文本值,如&quot;title: Everyday Italian&quot;、&quot;author: Giada De Laurentiis&quot;和&quot;year: 2005&quot;。
|
4天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
该文介绍了如何遍历XML文档的节点树。通过循环移动,可以访问每个元素,例如提取值。示例展示了遍历`&lt;book&gt;`的所有子节点,显示节点名和值,如`title: Everyday Italian`, `author: Giada De Laurentiis`, `year: 2005`。代码首先加载XML到`xmlDoc`,然后获取根元素子节点并输出其名称与文本值。
|
6天前
|
XML JavaScript 数据格式
XML DOM 节点树
这是一个关于XML DOM节点树的描述,关注点在于第一个子节点和最后一个子节点。示例XML片段包含书籍信息:书名&quot;Giada De Laurentiis&quot;,出版年份2005,价格30.00。
|
8天前
|
XML JavaScript 数据格式
XML DOM 节点树
这是一个关于XML DOM节点树的描述,提到了从第一个子节点到最后一个子节点的内容。示例XML片段包含书籍信息:书名&quot;Giada De Laurentiis&quot;,出版年份&quot;2005&quot;和价格&quot;30.00&quot;。
|
8天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
该文介绍了如何遍历XML文档的节点树。通过示例代码展示了如何使用DOM解析XML,遍历并打印出所有子节点的名称和值,以提取所需信息。实例中,XML数据包含书籍详情,程序逐个输出了这些细节。
|
7天前
|
XML JavaScript 数据格式
DOM 节点列表长度(Node List Length)
`length`属性用于获取DOM节点列表的长度,即节点数量。通过它可遍历列表,如`for(i=0; i&lt;x.length; i++)`循环访问每个`title`节点,并输出其内容。示例展示了从&quot;books.xml&quot;加载XML后,获取并打印所有标题节点的值。