删除节点

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事件

插入节点

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事件

特性节点

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>