JavaScript监听DOM节点变化事件

API	描述	浏览器兼容
DOMSubtreeModified	监听元素的DOM结构发生变化	IE8不支持
DOMNodeInserted	监听父元素中插入子元素	IE8不支持
DOMNodeRemoved	监听父元素中移除子元素	IE8不支持
DOMNodeInsertedIntoDocument	监听元素插入文档	只有chrome/safari/opera支持
DOMNodeRemovedFromDocument	监听元素从文档中移除	只有chrome/safari/opera支持
DOMAttrModified	监听元素的属性修改	只有firefox、IE8支持
DOMCharacterDataModified	监听元素的文本节点变化	只有chrome/safari/opera支持

DOMSubtreeModified

   <main>
    <h1 class="text">123</h1>
   </main>
   <button onclick="set()">点击</button>
   <script>
        const mainNode=document.querySelector('main');
        const h1=document.querySelector('h1');
        h1.addEventListener('DOMSubtreeModified',()=>{
            console.log(123213);
        })
        function set(){
         mainNode.removeChild(h1);
        }
   </script>

监听DOM结构变化的事件中，较为常用的就是DOMSubtreeModified；

DOMNodeInserted

   <main>
    <h1 class="text">123</h1>
   </main>
   <button onclick="set()">点击</button>
   <script>
        const mainNode=document.querySelector('main');
        const h1=document.querySelector('h1');
        mainNode.addEventListener('DOMNodeInserted',()=>{
            console.log(123213);
        })
        function set(){
            let h2=document.createElement('h2');
            h2.innerText="789";
            mainNode.appendChild(h2);
        }
   </script>

DOMNodeInserted监听的是元素的插入，属性节点的添加是监听不到的。

DOMNodeRemoved

   <main class="abc">
    <h1 class="text">123</h1>
   </main>
   <button onclick="set()">点击</button>
   <script>
        const mainNode=document.querySelector('main');
        const h1=document.querySelector('h1');
        mainNode.addEventListener('DOMNodeRemoved',()=>{
            console.log(123213);
        })
        function set(){
            mainNode.removeChild(h1);
        }
   </script>

DOMNodeRemoved监听的是元素的移除，属性节点移除是监听不到的。

DOMNodeInsertedIntoDocument

   <main class="abc">
    <h1 class="text">123</h1>
   </main>
   <button onclick="set()">点击</button>
   <script>
        const mainNode=document.querySelector('main');
        const h1=document.querySelector('h1');
        let h2=document.createElement("h2");
        h2.innerText="HHH222"
        h2.addEventListener('DOMNodeInsertedIntoDocument',()=>{//监听的是h2元素，而不是main父元素
            console.log(123213);
        })
        function set(){
            mainNode.appendChild(h2);
        }
   </script>

DOMNodeInsertedIntoDocument监听的是元素的插入

DOMNodeRemovedFromDocument

   <main class="abc">
    <h1 class="text">123</h1>
   </main>
   <button onclick="set()">点击</button>
   <script>
        const mainNode=document.querySelector('main');
        const h1=document.querySelector('h1');
        h1.addEventListener('DOMNodeRemovedFromDocument',()=>{
            console.log(123213);
        })
        function set(){
            mainNode.removeChild(h1);
        }
   </script>

DOMNodeRemovedFromDocument监听的是元素的移除

DOMAttrModified

   <main class="abc">
    <h1 class="text">123</h1>
   </main>
   <button onclick="set()">点击</button>
   <script>
        const mainNode=document.querySelector('main');
        const h1=document.querySelector('h1');
        h1.addEventListener('DOMAttrModified',()=>{
            console.log(123213);
        })
        function set(){
          h1.setAttribute("class","jkl");
        }
   </script>

DOMAttrModified监听的是元素属性的变化

DOMCharacterDataModified

       <main class="abc">
        <h1 class="text">123</h1>
       </main>
       <button onclick="set()">点击</button>
       <script>
            const mainNode=document.querySelector('main');
            const h1=document.querySelector('h1');
            h1.addEventListener('DOMCharacterDataModified',()=>{
                console.log(123213);
            })
            function set(){
                h1.firstChild.nodeValue="789a"
            }
       </script>

DOMCharacterDataModified监听的是元素中文本节点的变化，但是innerHTML、innerText与textContent都是监听不到的，使用el.firstChild.nodeValue才会触发DOMCharacterDataModified的监听