首页 > web前端 > js教程 > 如何在 JavaScript 中检测并响应 DOM 更改?

如何在 JavaScript 中检测并响应 DOM 更改?

Linda Hamilton
发布: 2024-12-15 01:54:09
原创
682 人浏览过

How Can I Detect and Respond to DOM Changes in JavaScript?

检测 DOM 更改

您可以使用各种方法检测文档对象模型 (DOM) 的更改。

1。 MutationObserver(现代浏览器)

const observer = new MutationObserver((mutations) => {
  // Process mutations here...
});

observer.observe(targetElement, { childList: true, subtree: true });
登录后复制

2.突变事件(已弃用,但仍然支持)

targetElement.addEventListener('DOMNodeInserted', (event) => {
  // Node added
});

targetElement.addEventListener('DOMNodeRemoved', (event) => {
  // Node removed
});
登录后复制

示例:检测输入添加

如果您特别想在

const targetElement = document.getElementById('element-to-monitor');

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
      const addedNodes = mutation.addedNodes;

      Array.from(addedNodes).forEach((node) => {
        if (node.nodeName === 'DIV' || node.nodeName === 'INPUT') {
          // Execute your function here...
        }
      });
    }
  });
});

observer.observe(targetElement, { childList: true, subtree: true });
登录后复制
时执行函数分区>或添加到 HTML 中,这是一个实际示例:

以上是如何在 JavaScript 中检测并响应 DOM 更改?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板