gpt4 book ai didi

javascript - MutationObserver 不工作

转载 作者:可可西里 更新时间:2023-11-01 01:49:07 24 4
gpt4 key购买 nike

考虑以下代码:

var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;

var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.log(mutation.target.nodeName);
});
});

observer.observe(document, {
attributes: true,
childList: true,
characterData: true
});
<div>
<ol contenteditable oninput="">
<li>Press enter</li>
</ol>
</div>

这是对 this 的轻微修改.

jsbin version 互动页面不产生任何日志。我哪里错了?请注意,如果我替换行

  observer.observe(document, {

  observer.observe(document.querySelector('ol'), {

脚本开始工作...

最佳答案

它似乎不起作用,因为您没有改变您观察到的任何东西。你既不改变

  • attributes: true 的属性 ( document )节点(这是可以理解的,因为 document 没有属性)
  • 子节点(childList: true):document的唯一子节点是<html>节点,并且您没有删除或替换它。
  • 字符数据 ( characterData: true ):您没有更改 document 的任何 Text、Comment 或 ProcessingInstruction 子项(也可以理解,因为 document 不能有这样的 child )。

如果替换 <html>节点,您可以看到变异观察器按照配置工作。

var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;

var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.log(mutation.target.nodeName);
});
});

observer.observe(document, {
attributes: true,
childList: true,
characterData: true
});

document.replaceChild(document.createElement('div'), document.documentElement);


您正在做的是更改 ol 的内容元素,它是 document后代 .

如果你想听这些变化,你必须设置subtree为真:

observer.observe(document, {
attributes: true,
childList: true,
subtree: true,
characterData: true
});

更多信息在 MDN documentation .

var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;

var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.log(mutation.target.nodeName);
});
});

observer.observe(document, {
attributes: true,
childList: true,
subtree: true,
characterData: true
});
<div>
<ol contenteditable oninput="">
<li>Press enter</li>
</ol>
</div>

关于javascript - MutationObserver 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30946829/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com