JS监听页面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的监听