DOMNodeInserted 的新等价物是什么?

2024-01-07

The DOMNodeInserted活动已被弃用 https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Mutation_events所有突变事件都已被突变观察者取代。

But, 在突变观察者中 https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver只有用于观察节点属性、内容和子节点突变的配置选项。没有关于它在 DOM 树中的位置的突变。

我能想到的一个“解决方案”是观察从 document.body 开始的所有内容,搜索正在添加的目标节点的一个突变,但这是一种非常糟糕的做任何事情的方式。

那么用 Mutation Observers 替换已弃用的 DOMNodeInserted 的预期方法是什么?

编辑:发现可能重复检测具有特定 ID 的元素何时插入 DOM 中的最有效方法是什么 https://stackoverflow.com/questions/24313108/what-is-the-most-efficient-way-of-detecting-when-an-element-with-a-particular-id?rq=1

再说一遍,所以:搜索栏与标签一起使用比与问题一起使用效果更好。解释这一点可以减少重复并节省用户时间 https://meta.stackoverflow.com/questions/336082/the-searchbar-works-better-with-tags-than-questions-explaining-this-could-reduc?noredirect=1#comment403450_336082

下面是一些代码,您可以在其中看到所有可用的突变观察者配置选项都不会响应添加到页面的元素:

var addMe = document.createElement("div");
var config = {
  attributes: true,
  childList: true,
  characterData: true
}
var observer = new MutationObserver(function(mutations) {
  console.log(mutations);
});
observer.observe(addMe, config);

function appendAddMe() {
  document.body.appendChild(addMe);
}
div {
  height: 50px;
  width: 50px;
  background: #969;
}
<button onclick="appendAddMe()">Append addMe</button>

我真的不认为这是the回答这个问题,但无论如何我想分享它,因为它总比没有好。

这个问题有一些很好的答案:检测具有特定 ID 的元素何时插入 DOM 中的最有效方法是什么 https://stackoverflow.com/questions/24313108/what-is-the-most-efficient-way-of-detecting-when-an-element-with-a-particular-id?rq=1

特别是这个答案:https://stackoverflow.com/a/25107064/4808079 https://stackoverflow.com/a/25107064/4808079 from 斯凯蒂诺72 https://stackoverflow.com/users/64444/schettino72

iframe 元素触发加载/卸载事件。您可以在要观看的元素中插入一个哑iframe...并自己在原始元素中触发“加载”事件。

function watch($ele){
    var $iframe = document.createElement('iframe');
    $iframe.style.display = 'none';
    $ele.appendChild($iframe);
    $iframe.addEventListener('load', function(){
      var event = new CustomEvent('load');
      $ele.dispatchEvent(event);
    });
}

我仍然想保持这个问题的开放性,因为这是一个黑客而不是一个真正的答案。 DOMNodeInserted 可能没有被弃用,所以每个人都可以这样做。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

DOMNodeInserted 的新等价物是什么? 的相关文章

  • React中ComponentDidMount生命周期方法被调用两次

    在我的 React 应用程序中 加载应用程序时会进行两次初始 API 调用 我查看了 Chrome gt inpsect 中的网络选项卡 启动器 调用堆栈显示第一个调用是从VM123000 bundle js而第二个调用只是从实际的bund
  • 如何将 blob 文件附加到 HTML href="mailto:" 中

    我有一个可通过 URL 获取的文件 需要授权 我创建了一个 mailto 链接 并希望将此文件附加到邮件中 我怎样才能做到这一点 类似于 mailto 电子邮件受保护 cdn cgi l email protection attachmen
  • JavaScript Array.length 属性是函数还是简单变量?

    我有以下 JavaScript 代码 我已经使用 new 关键字初始化了一个数组 因此创建了该数组对象的一个 新实例 然后 我通过向数组添加元素来填充该数组 然而我认为我犯了一个根本性的误解 代码的下一部分让我非常困惑 如果它不够清楚或者完
  • 外部 CSS 是否应用于 jsPDF 生成的 pdf

    我已经开始使用 jspdf 制作一些演示 我有一个 html 文件 我的 css 在外部文件中 我写了下面的代码来生成我的pdf pdfButton on click function var pdf new jsPDF p in lett
  • 代理递归函数

    想象一个简单的递归函数 我们试图包装它以检测输入和输出 A simple recursive function const count n gt n 1 count n 1 Wrap a function in a proxy to ins
  • 用于匹配重复子字符串的单个js正则表达式?

    假设我有一个字符串 例如 where is mummy where is daddy 我想用空字符串替换任何一组重复子字符串 所以在这种情况下where and is元素将被删除 结果字符串将是 mummy daddy 我想知道是否有任何单
  • 从画布保存/转换后文件质量下降的问题

    这是我正在使用的代码 代码位于这篇文章的底部 但这里是链接GitHubGist Noitidart ff addon snippet browseForBadgeThenCreateSaveAnApply js https gist git
  • 我可以阻止history.popstate在初始页面加载时触发吗?

    我正在开发一个通过 AJAX 提供内容的网站 如果您单击菜单中的某个项目 内容 div 会更新为 get回应 没什么花哨的 我正在实施history pushState允许使用浏览器的后退 前进按钮进行导航 我有以下内容可以在历史导航上加载
  • 名称属性的 CSS 选择器?

    这可能是一个愚蠢的问题 但是属性的 CSS 选择器是什么 a 那是 名字 document body innerHTML myString anchor HTML String 这段 JavaScript 创建了一个 a 带有名称的元素 H
  • 如何使用 JS/Puppeteer 上传文件

    我试图弄清楚如何将图片文件上传到输入对话框中 不可能只输入名称并按 Enter 键 因为我没有找到使用 Puppeteer 实现自动化的方法 我想我必须设置一些值作为图片 但我不知道该怎么做 有任何想法吗 您使用上传文件elementHan
  • 从变量值动态设置 ng-controller

    我正在使用 AngularJs 和 NodeJS 开发一个应用程序 我对将控制器的名称设置为主控制器中的变量的值感到震惊 为了更好地解释它 我的 index html 看起来像这样 tbody tr td td td member task
  • Jasmine 单元测试不等待承诺解析

    我有一个有角度的服务 它具有像这样的异步依赖项 function angular module app factory myService q asyncService function q asyncService var myData
  • 删除数组中所有对象的属性

    我想删除bad数组中每个对象的属性 有没有比使用更好的方法for循环并从每个对象中删除它 var array bad something good something bad something good something for var
  • 扩展html表格突出显示行和列并使当前单元格具有不同的颜色

    我找到了用鼠标悬停时突出显示行和列的示例 https stackoverflow com a 28312853 139698 https stackoverflow com a 28312853 139698 如何使鼠标悬停的一个单元格变为
  • Meteor JS:存储特定模板实例状态的最佳方法是什么?

    我正在学习 Meteor JS 中的会话和反应式数据源 它们非常适合设置全局 UI 状态 但是 我不知道如何将它们的范围限制到模板的特定实例 这就是我想做的 我的页面上有多个可内容编辑的元素 每个下面都有一个 编辑 按钮 当用户单击 编辑
  • 如何使用 Ajax 在 Flask 中发布按钮值而不刷新页面?

    我有一个问题 当我单击 Flask 应用程序中的按钮时 我想避免重新加载 我知道有 Ajax 解决方案 但我想知道如何将我的按钮链接到 ajax 函数以发布按钮值并运行链接到其值的 python 函数 这是我的 html 按钮 div di
  • 将base64图像转换为Node Js中的文件

    我是 Node Js 新手 我需要包含用户的个人资料图片 我从 IOS 应用程序收到 Base64 图像的请求 我需要将其存储在 images 文件夹中并将图像路径保存在 mongodb 数据库中 我使用了以下代码 var bitmap n
  • 角度距离计算

    我正在使用角度制作距离计算应用程序 Html
  • Chrome + 另一个进程:进程间通信比 HTTP/XHR 请求更快?

    我有一个进程 1 对视频流进行实时图像处理 我需要在 Chrome 中的 HTML 页面中渲染该视频 同一台计算机上的进程 2 在canvas or img or videoHTML5 元素 由于我有 1000x1000 像素 x 3 字节
  • 表单帖子上的 asp.net mvc 编码

    我在我的 asp net mvc 表单 带有文本区域的 nicedit 中使用富文本编辑器 当我在帖子上提交表单时 因为它不是 html 编码的 我收到以下消息 从客户端检测到潜在危险的 Request Form 值 如何对 post 上的

随机推荐