你是否会遇到,当前页面内容变化了,但是却不知道哪个脚本影响了它?神奇的 chrome 控制台可以帮到你。

Subtree Modifications

子节点(内容、属性)修改通知

如上图,添加了body节点的子节点修改通知。

// 不会触发 Subtree Modifications
document.body.innerHTML = 'test';
document.body.innerHTML = 'test2';

// 会触发 Subtree Modifications
document.body.innerHTML = '<b></b>';

如上图,依次修改了body节点的内容,只有当内容中包含节点,才会触发通知。

使用场景:常用在子节点内容发生变化后,来定位源码。

Attributes Modifications

(当前节点)属性修改通知

只有当修改了 DOM 属性的操作才会触发通知回调。

// 会触发 Attributes Modifications
document.body.id = 123;
document.body.setAttribute('id', 123);
document.body.setAttribute('id2', 456);

// 不会触发 Attributes Modifications
document.body.id2 = 456;

使用场景:节点的 className 等属性被修改后,来定位源码。

Node Removal

(当前)节点移动(通知)

原始节点:

<body>
    <p>子节点1</p>
    <p>子节点2</p>
</body>

第1次:

// 第1次:不会触发
document.body.insertBefore(document.body.children[1], document.body.children[0]);

此时节点为:

<body>
    <p>子节点2</p>
    <p>子节点1</p>
</body>

虽然,监听的是“子节点1”,并且它的位置也发生了变化,但这个变化是由“子节点2”导致的,所以不会触发通知回调。

第2次:

// 第2次:会触发
document.body.insertBefore(document.body.children[1], document.body.children[0]);

此时节点为:

<body>
    <p>子节点1</p>
    <p>子节点2</p>
</body>

此时,会触发节点移动通知回调,实际操作的就是“子节点1”。

场景:节点被移除了,定位源码。