[1]刪除節點 [2]插入節點 [3]特性節點 [4]文本節點 ...
×
目錄
[1]刪除節點 [2]插入節點 [3]特性節點[4]文本節點前面的話
變動(mutation)事件能在DOM中的某一部分發生變化時給出提示,這類事件非常有用,但都只能使用DOM2級事件處理程式,且由於瀏覽器相容性不好,所以用的不廣泛
刪除節點
刪除節點時,涉及到DOMNodeRemoved事件、DOMNodeRemovedFromDocument事件和DOMSubtreeModified事件這三個事件,下麵將詳細介紹
DOMNodeRemoved
在使用removeChild()或replacechild()從DOM中刪除節點時,會觸發DOMNodeRemoved事件。而event.relatedNode屬性中包含著對目標節點父節點的引用。在這個事件觸發時,節點尚未從其父節點刪除,因此其parentNode屬性仍然指向父節點。該事件會冒泡
[註意]IE8-瀏覽器不支持
<div id="box" style="height: 30px;width: 100px;"> <div id="inBox">1</div> </div> <button id="btn">刪除子節點</button> <script> inBox.addEventListener('DOMNodeRemoved',function(e){ e = e || event; e.relatedNode.style.background = 'lightblue'; }); btn.onclick = function(){ box.removeChild(inBox); } </script>
DOMNodeRemovedFromDocument
如果被移除的節點包含子節點,那麼在其所有子節點以及這個被移除的節點上會相繼觸發DOMNodeRemovedFromDocument事件,這個事件不會冒泡,目標target指向被移除的節點
[註意]該事件只有chrome/safari/opera瀏覽器支持
<div id="box" style="height: 30px;width: 100px;"> <div id="inBox">1</div> </div> <button id="btn">刪除子節點</button> <script> inBox.addEventListener('DOMNodeRemovedFromDocument',function(e){ e = e || event; console.log(e.target.innerHTML)//1 }); btn.onclick = function(){ box.removeChild(inBox); } </script>
DOMSubtreeModified
在DOM結構中發生任何變化時都會觸發DOMSubtreeModified事件,該事件在其他任何事件觸發後都會觸發
該事件的目標是被移除節點的父節點
[註意]IE8-瀏覽器不支持
<div id="box" style="height: 30px;width: 100px;"> <div id="inBox">1</div> </div> <button id="btn">刪除子節點</button> <script> box.addEventListener('DOMSubtreeModified',function(e){ e = e || event; console.log(e.type)//DOMSubtreeModified }); btn.onclick = function(){ box.removeChild(inBox); } </script>
順序
刪除節點時,事件觸發的先後順序是DOMNodeRemoved事件、DOMNodeRemovedFromDocument事件和DOMSubtreeModified事件
<div id="box" style="height: 30px;width: 100px;"> <div id="inBox">1</div> </div> <div id="result"></div> <button id="btn">刪除子節點</button> <script> inBox.addEventListener('DOMNodeRemoved',handler); box.addEventListener('DOMSubtreeModified',handler); inBox.addEventListener('DOMNodeRemovedFromDocument',handler); function handler(e){ e = e || event; result.innerHTML += e.type + ';'; } btn.onclick = function(){ box.removeChild(inBox); } </script>
插入節點
插入節點時涉及到DOMNodeInserted事件、DOMNodeInsertedIntoDocument事件及DOMSubtreeModified事件,下麵將詳細介紹
DOMNodeInserted
在使用appendChild()、replaceChild()或insertBefore()向DOM中插入節點時,首先觸發DOMNodeInserted事件
這個事件的目標是被插入的節點,而event.relatedNode屬性中包含一個對父節點的引用
在這個事件觸發時,節點已經被插入到了新的父節點中。這個事件是冒泡的,因此可以在DOM的各個層次上處理它
[註意]IE8-瀏覽器不支持
<div id="box" style="height: 30px;width: 100px;"> </div> <button id="btn">插入節點</button> <script> box.addEventListener('DOMNodeInserted',function(e){ e = e || event; e.relatedNode.style.background = 'lightblue'; }); btn.onclick = function(){ document.body.appendChild(box); } </script>
DOMNodeInsertedIntoDocument
在新插入的節點上面會觸發DOMNodeInsertedIntoDocument事件。這個事件不冒泡,因此必須在插入節點之前為它添加這個事件處理程式。這個事件的目標是被插入的節點
[註意]該事件只有chrome/safari/opera瀏覽器支持
<div id="box" style="height: 30px;width: 100px;"> </div> <button id="btn">插入節點</button> <script> box.addEventListener('DOMNodeInsertedIntoDocument',function(e){ e = e || event; box.style.background = 'lightblue'; }); btn.onclick = function(){ document.body.appendChild(box); } </script>
順序
插入節點時,事件觸發的先後順序是DOMNodeInserted事件、DOMNodeInsertedIntoDocument事件和DOMSubtreeModified事件
<div id="box" style="height: 30px;width: 100px;"> </div> <div id="outer"></div> <div id="result"></div> <button id="btn">插入子節點</button> <script> box.addEventListener('DOMNodeInserted',handler); outer.addEventListener('DOMSubtreeModified',handler); box.addEventListener('DOMNodeInsertedIntoDocument',handler); function handler(e){ e = e || event; result.innerHTML += e.type + ';'; } btn.onclick = function(){ outer.appendChild(box); } </script>
特性節點
DOMAttrmodified
當特性被修改後,DOMAttrmodified事件被觸發
[註意]該事件只有firefox和IE8+瀏覽器支持
<div id="box" title="123" style="height: 30px;width: 100px;"></div> <button id="btn">修改特性</button> <script> box.addEventListener('DOMAttrModified',handler); function handler(e){ e = e || event; box.innerHTML = e.type; } btn.onclick = function(){ box.setAttribute('title','abc'); } </script>
文本節點
DOMCharacterDataModified
當文本節點的值發生變化時,觸發DOMCharacterDataModified事件
[註意]該方法只有chrome/safari/opera瀏覽器支持
<div id="box" style="height: 30px;width: 100px;">abc</div> <button id="btn">修改文本</button> <script> box.addEventListener('DOMCharacterDataModified',handler); function handler(e){ e = e || event; console.log(e) box.style.background = 'pink'; } btn.onclick = function(){ box.innerHTML = '123'; } </script>
最後
上面7個變動事件,瀏覽器相容性都不是太好。唯三過得去就是DOMNodeInserted、DOMNodeRemoved和DOMSubtreeModified這三個事件,不相容IE8-瀏覽器