草庐IT

javascript - MutationObserver 的 DOM 上下文丢失，因为它触发得太晚

coder 2024-05-09 原文

我的代码的简化版本:

<div id="d">text<br><hr>text</div>

<script>
    // Called when DOM changes.
    function mutationCallback(mutations) {
        // assert(mutations.length === 3);
        var insertImg = mutations[0];
        console.log(insertImg.previousSibling.parentNode);  // Null!
        console.log(insertImg.nextSibling.parentNode); // Null!
        // Can't determine where img was inserted!
    }
  
    // Setup
    var div = document.getElementById('d');
    var br = div.childNodes[1];
    var hr = div.childNodes[2];
    var observer = new MutationObserver(mutationCallback);
    observer.observe(div, {childList: true, subtree: true});

    // Trigger DOM Changes.
    var img = document.createElement('img');
    div.insertBefore(img, hr);
    div.removeChild(hr);
    div.removeChild(br); // mutationCallback() is first called after this line.
</script>

我正在使用 Mutation Observers 来捕获 DOM 更改，以便在一个文档实例发生变化时更新另一个文档实例。因为直到 的前一个和下一个兄弟被移除后才会调用突变观察器函数，所以 mutationCallback 函数无法判断它插入的位置。转载于 Chrome、FF 和 IE11。

另一种方法是遍历整个文档以查找更改，但这会抵消使用 Mutation Observers 的性能优势。

最佳答案

mutations 数组是针对特定目标发生的突变的完整列表。这意味着，对于任意元素，了解父元素在发生该突变时的唯一方法是您必须查看后来的突变以查看父元素何时发生突变，例如

var target = mutations[0].target
var parentRemoveMutation = mutations
 .slice(1)
 .find(mutation => mutation.removedNodes.indexOf(target) !== -1);
var parentNode = parentRemoveMutation 
  ? parentRemoveMutation.target // If the node was removed, that target is the parent
  : target.parentNode; // Otherwise the existing parent is still accurate.

不过如您所见，这是针对第一个突变进行的硬编码，您可能必须一次对列表中的每个项目执行一次。这不会很好地扩展，因为它必须进行线性搜索。您还可以通过完整的突变列表来首先构建该元数据。

总而言之，这里问题的核心似乎是您真的不应该关心理想世界中的 parent 。例如，如果您正在同步两个文档，您可以考虑使用 WeakMap 来跟踪元素，因此对于每个可能的元素，都有一个从正在变异的文档到同步文档中的每个元素的映射。然后当发生突变时，您可以只使用 Map 在原始文档中查找相应的元素，并在原始文档上重现更改，而无需查看父文档。

关于javascript - MutationObserver 的 DOM 上下文丢失，因为它触发得太晚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49263285/

MutationObserverjavascriptsectionmutationscodedommutation-observers

有关javascript - MutationObserver 的 DOM 上下文丢失，因为它触发得太晚的更多相关文章

  1. ruby - 在 Ruby 中，在类方法的上下文中，什么是实例变量和类变量？ - 2

    如果我有以下一段Ruby代码:classBlahdefself.bleh@blih="Hello"@@bloh="World"endend@blih和@@bloh到底是什么？@blih是Blah类中的一个实例变量，@@bloh是Blah类中的一个类变量，对吗？这是否意味着@@bloh是Blah的类Class中的一个变量？ 最佳答案 人们似乎忽略了该方法是类方法。@blih将是常量Bleh的类Class实例的实例变量。因此:irb(main):001:0>classBlehirb(main):002:1>defself.blehirb

  2. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  3. ruby - 在 Ruby 中的另一个上下文中评估潜在的相对 URI - 2

    我在Ruby程序中有两个URI。一个肯定是绝对URI，另一个可能是绝对URI或相对URI。我想在第一个的上下文中将第二个转换为绝对URI，所以如果第一个是http://pupeno.com/blog第二个是/about，结果应该是http://pupeno.com/about.有什么想法吗？ 最佳答案 Ruby的内置URI和Addressablegem，做这个简短的工作。我更喜欢Addressable，因为它功能更全面，但URI是内置的。require'uri'URI.join('http://pupeno.com/blog','/

  4. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  5. ruby-on-rails - Ubuntu 14.04 Rails 丢失文件 - 2

    安装Rails时，一切都很好，但后来，我写道:rails-v和输出:/home/toshiba/.rvm/rubies/ruby-2.2.1/lib/ruby/site_ruby/2.2.0/rubygems/core_ext/kernel_require.rb:54:in`require':cannotloadsuchfile--rails/cli(LoadError)from/home/toshiba/.rvm/rubies/ruby-2.2.1/lib/ruby/site_ruby/2.2.0/rubygems/core_ext/kernel_require.rb:54:in`r

  6. Ruby 将上下文分配给 lambda？ - 2

    是否可以不为lambda分配上下文？例如:classRuledefget_rulereturnlambda{putsname}endendclassPersonattr_accessor:namedefinit_rule@name="ruby"Rule.new.get_rule.call()#shouldsay"ruby"butsaywhatobjectofclassRull,doesnothavevariablename#orself.instance_eval&Rule.new.get_ruleendend我的目标是->没有上下文的存储过程对象，并在特定位置调用之前分配上下文。可能

  7. ruby - 将 ruby​​ 日期转换为字符串而不丢失格式 - 2

    我正在尝试将RubyDate对象转换为字符串。日期格式为:Sun,15Sep2013但是，当我使用#to_s将其转换为字符串时，它会给出以下内容:"2013-09-15"相反，我希望它变成:"Sun,15Sep2013" 最佳答案 使用Date#strftime有很多选择require'date'date=Date.parse("Sun,15Sep2013")#=>#date.strftime("%a,%d%b%Y")#=>"Sun,15Sep2013" 关于ruby-将ruby​​日期

  8. ruby - 无法激活 susy-2.1.1，因为 sass-3.2.17 与 sass 冲突 (~> 3.3.0) - 2

    我已经安装了最新版本的compass、sass和susy。但我仍然收到此错误:Unabletoactivatesusy-2.1.1,becausesass-3.2.17conflictswithsass(~>3.3.0)有人知道这个Ruby是如何工作的吗？这是我安装的gem的列表:***LOCALGEMS***CFPropertyList(2.2.0)chunky_png(1.3.0)compass(0.12.4)compass-core(1.0.0.alpha.19)compass-import-once(1.0.4)compass-rails(1.1.3)fssm(0.2.10)l

  9. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  10. ruby-on-rails - 我将 Rails3 与 tinymce 一起使用。如何呈现用户关闭浏览器javascript然后输入xss？ - 2

    我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中，html表单使用tinymce将“content”列设置为textarea字段。在首页，因为使用了tinymce，post.html.erb的代码需要用这样的原始方法来实现。.好的，现在如果我关闭浏览器javascript，这个文本区域可以在没有tinymce的情况下输入，也许用户会输入任何xss，比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中，但sanitize方法将相互过滤tinymce样式。例如

随机推荐