第 117 期(JavaScript-DOM)：监听页面DOM元素的插入 #120
Description
监听页面中 DOM 节点的插入是一个很实用的功能，例如我们可以在节点插入到页面之前对其进行初始化。
document.addEventListener('DOMNodeInserted', function(event) {
console.log(event.target.nodeName.toLowerCase())
console.log('type', event.type); // 1:DOMNodeInserted
console.log('element', event.target); // 2:被添加的节点
console.log('relate', event.relatedNode); // 3:被添加节点的父节点
});需要注意的是 DOMNodeInserted 这类 mutation 事件在标准中已不赞成使用，推荐用 Mutation Observers 代替。
var observer = new MutationObserver(function(mutationsList) {
mutationList.forEach(function(mutation) {
switch(mutation.type) {
case 'childList':
/* 从树上添加或移除一个或更多的子节点 */
break;
case 'attributes':
/* mutation.target 中某节点的一个属性值被更改 */
break;
}
});
});
observer.observe(document.body, {
childList: true, // 观察目标子节点的变化，添加或者删除
attributes: true, // 观察属性变动
subtree: true // 默认为 false，设置为 true 可以观察后代节点
});