JavaScript中如何监听dom的节点变化

最新推荐文章于 2024-03-29 09:39:29 发布

小样还想跑

最新推荐文章于 2024-03-29 09:39:29 发布

阅读量546

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_45356397/article/details/129729703

版权

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="./js/loadsource.js"></script>
    <title>MutationObserver 监听dom</title>
  </head>
  <body>
    <div class="parent">
      <header>
        <h1>事件循环</h1>
      </header>
      <main id="main">
        <button type="button" class="btn btn-primary">点击</button>
      </main>
    </div>

    <script>
      const button = document.querySelector('[type=button]');
      button.addEventListener('click', (e) => {
        if (e.target.tagName === 'BUTTON') {
          let parent = e.target.parentNode;
          let childList = [...parent.children];

          if (childList[1] && childList[1]?.tagName === 'DIV') {
            parent.removeChild(childList[1]);
          } else {
            let div = document.createElement('div');
            div.className = 'div-show';
            div.innerText = 'hello world';
            parent.appendChild(div);
          }
        }
      });

      const targetNode = document.querySelector('#main');
      const observerOptions = {
        childList: true,
        attributes: false,
        subtree: true, // 子树中的所有节点
      };

      const observer = new MutationObserver((mutationsList, observer) => {
        for (let mutation of mutationsList) {
          if (mutation.type === 'childList') {
            console.log('A child node has been added or removed.');
          }
        }
      });

      observer.observe(targetNode, observerOptions);
    </script>
  </body>
</html>