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>



相关文章
|
5天前
|
XML JavaScript 前端开发
XML DOM 节点信息
XML DOM提供nodeName、nodeValue和nodeType属性来揭示节点详情。一个JavaScript示例展示了如何运用这些属性:loadXMLDoc函数加载XML文件&quot;books.xml&quot;,然后通过nodeName获取根元素名,用nodeValue提取文本节点的内容。
|
8天前
|
XML JavaScript 数据格式
XML DOM 节点列表
`getElementsByTagName()` 和 `childNodes` 返回 XML DOM 中的节点列表,表现为按顺序排列的节点集合。节点通过 0 开始的索引访问。例如,以下代码加载 &quot;books.xml&quot;,获取所有 `&lt;title&gt;` 元素的节点列表,然后提取第一个 `&lt;title&gt;` 的文本内容:`xmlDoc.getElementsByTagName(&quot;title&quot;)[0].childNodes[0].nodeValue`,结果为 &quot;Everyday Italian&quot;。
|
10天前
|
XML JavaScript 前端开发
XML DOM 节点信息
XML DOM 节点详解:nodeName、nodeValue 和 nodeType 属性用于获取和操作节点信息。示例展示如何加载XML文件,如books.xml,通过loadXMLDoc函数。nodeName获取元素节点名,nodeValue用于获取或设置文本节点内容,nodeType显示节点类型(如元素:1,属性:2,文本:3,注释:8,文档:9)。每个节点都是可访问和操作的对象,包含方法和属性。
|
12天前
|
XML 存储 JavaScript
DOM 节点列表(Node List)
XML DOM允许访问XML文档的每个节点,提供三种访问方法:getElementsByTagName()、循环遍历和导航节点关系。getElementsByTagName()返回一个节点列表,类似于数组,可用于获取特定标签名的节点。例如,加载&quot;books.xml&quot;后,`xmlDoc.getElementsByTagName(&quot;title&quot;)`会获取所有&lt;title&gt;元素,存储在变量x中。通过索引如x[2]可访问第三个&lt;title&gt;元素,注意索引从0开始。后续章节将进一步探讨节点列表(Node List)。
|
1天前
|
XML JavaScript 前端开发
DOM 属性列表(命名节点图 Named Node Map)
这段内容介绍了如何使用JavaScript操作XML文档中的DOM属性。通过`getElementsByTagName`获取元素后,`attributes`属性返回一个命名节点图(Named Node Map),表示元素的属性列表,该列表会自动更新。示例代码展示了加载&quot;books.xml&quot;,获取第一个`&lt;book&gt;`元素的属性列表,然后利用`getNamedItem()`方法获取&quot;category&quot;属性的值并输出,同时显示属性数量。
|
1天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
该文介绍了如何遍历XML文档的DOM节点树。通过循环节点,可以访问并处理每个元素,如提取值。示例代码展示了加载XML字符串到`xmlDoc`后,遍历根元素的所有子节点,打印出节点名及文本值,例如:&quot;title: Everyday Italian&quot;、&quot;author: Giada De Laurentiis&quot;和&quot;year: 2005&quot;。
|
2天前
|
XML 存储 JavaScript
XML DOM 节点
**DOM 把XML文档拆解为节点:** - 文档是个文档节点 - 每个元素是元素节点 - 文本、属性和注释各为独立节点 - 元素内的文本属于文本节点,如 `&lt;year&gt;2005&lt;/year&gt;` 中的 &quot;2005&quot; 是单独的文本节点,不是元素的值。
|
3天前
|
JavaScript 前端开发
JavaScript 提供了多种方法来操作 DOM(文档对象模型)
【5月更文挑战第11天】JavaScript 用于DOM操作的方法包括获取元素(getElementById, getElementsByClassName等)、修改内容(innerHTML, innerText, textContent)、改变属性、添加/删除元素(appendChild, removeChild)和调整样式。此外,addEventListener用于监听事件。注意要考虑兼容性和性能当使用这些技术。
6 2
|
3天前
|
JavaScript
DOM 节点列表长度(Node List Length)
`length`属性用于获取DOM节点列表的长度,允许遍历和处理节点。例如,加载&quot;books.xml&quot;到`xmlDoc`,通过`getElementsByTagName(&quot;title&quot;)`获取所有标题节点,然后使用循环输出每个&lt;title&gt;元素的文本内容。
|
6天前
|
XML Web App开发 JavaScript
XML DOM - 导航节点
在XML DOM中,导航节点涉及利用parentNode、childNodes、firstChild、lastChild、nextSibling和previousSibling属性来遍历节点树。不同浏览器对空文本节点处理不一致,可能导致导航问题。为解决此问题,可以使用get_nextSibling函数,它检查并跳过非元素类型的空文本节点,确保在IE和Firefox等浏览器中得到一致的结果。该函数循环遍历直到找到下一个元素节点。