个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在开发一个 Chrome 扩展程序，它可以解析 DOM 并根据特定条件转换一些文本节点。我使用的是纯 Javascript，即没有 jQuery 或其他框架，我想保持这种状态。
我如何查看 DOM 中是否有新的动态插入元素，以便我也可以在它们上运行我的解析器？
再次重申，请不要推荐任何 jQuery 解决方案，或使用纯 Javascript 以外的任何解决方案。
最佳答案
接受的答案实际上不起作用，原因有几个(如下所述)。
相反，我建议这样做:
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
mutation.addedNodes.forEach(function(addedNode) {
// Do things to `addedNode` here
});
});
});
observer.observe(document.body, {childList: true, subtree: true});
...因为，正如 miniml 正确指出的那样，subtree: true需要接收添加的非直接子元素的事件，并且传递给监听器回调的参数是 MutationRecord 的数组
此外，我选择了 document.body作为我的观察根，因为我不认为监听动态插入到 <head> 中的元素是大多数人感兴趣的东西。(但如果需要，则只需将 document.body 替换为 document.documentElement 或仅替换 document。)
有趣的旁注:在已接受的答案中，如果有人真的删除了 <html>，那么听众唯一真正触发的情况就是元素和/或之后重新创建它。就是这样。 (因为文档对象是 only allowed to have one Element child 。)
关于javascript - 观察 DOM 的新元素 (VanillaJS)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34429865/
25
4
0
我将 TailwindUI 的滑盖与普通 JS 一起使用，叠加层和不透明度应用正确，但动画是立即发生的，而不是使用持续时间类。 https://tailwindui.com/components/ap
看来Polymer的 polyfill-next-selector { content: ':host #myId' } 对 VanillaJS 不起作用(在 IE 中) s 和自定义元素。 对于它工
这个问题在这里已经有了答案: How to get the div that has a duplicated id using querySelector()? (3 个答案) addEvent
锁定。这个问题及其答案是locked因为这个问题是题外话，但具有历史意义。它目前不接受新的答案或交互。 我有一个简单的问题，在我脑海中萦绕了好几天:VanillaJS 是什么？有人把它称为框架，你可以
我得到字符串: 'document.write("hello")' 我必须使用 VanillaJS 创建一个内联脚本元素。 有没有办法触发脚本执行？ 可以工作，但太复杂: const scriptSt
我正在为搜索引擎做前端，我有一个 div，它会根据搜索结果重复多次。所有这些都需要 chop 文本并显示更多/更少按钮。我正在使用切换类来 chop 文本。我写了下面的代码，但是，它只适用于第一个 d
我有下表，其中包含一些对象: var data = [ { "userRoleId": 1, "userId": 1, "roleId": 1,
给定一串偶数和奇数，找出唯一的偶数或唯一的奇数。 示例:检测离群值(“2 4 7 8 10”);//=> 2 - 第三个数字是奇数，而其余数字是偶数 即使我已经将所有内容都转换为数字，为什么我还需要再
只有2张图片，我想互相切换，但找不到解决方案。第一次单击时，它工作正常，但第二次单击时，当我想返回上一个图像时，它不起作用。我想也许(蜇伤)情况不好，但不知道是什么。 function ex
$('.tabLabel').click(function() { if (!$(this).hasClass('activeTab')) { $('.tabLabel').removeC
我正在开发一个 Chrome 扩展程序，它可以解析 DOM 并根据特定条件转换一些文本节点。我使用的是纯 Javascript，即没有 jQuery 或其他框架，我想保持这种状态。 我如何查看 DOM
我不知道如何将此代码从 Jquery 重写为 VanillaJS。累了几天，一直没有找到解决办法。 我想我已经搜索了整个 Internet 但一无所获......有人可以给我一个“准备好的”代码吗？请
我正在开发一个 Vanilla JS 库。这个库必须公开一个对象，我们称之为 sdk :此对象将包含所有库方法，因此潜在用户可以执行 sdk.myFunction(); 这是我的 webp
只是想知道，我如何能够以以下格式迭代我的 json 对象？ [ {"page":1,"pages":1,"per_page":"600","total":264}, [ {
我正在构建一个类似 jQuery 的库，但是这里有一个错误，其中行 $('#hello').addClass('blue'); 不起作用故意的。 class DOM { constructor
这个问题已经有答案了: ES2015 import doesn't work (even at top-level) in Firefox (10 个回答) ES6 modules in the br
我在 DOM 的不同位置和深度有几个 html 节点。我需要根据它们在 DOM 中的位置对它们进行有效排序，而不管它们的深度如何。 它应该使用 VanillaJS 来实现，而不是 jQuery 之类的
所以如果你去这里 https://quantumjs.github.io/solar-popup/demo/dist/然后单击第一个按钮，然后关闭弹出窗口就可以了如果您再次单击该按钮然后关闭弹出窗口，
我使用的是 vanilla JS，我遇到了一个非常烦人的问题，如果您将鼠标悬停在具有 mouseleave 事件监听器的元素的滚动条上，则会调用 mouseleave。 但是，如果您在悬停元素之前使用
我目前正在使用 $.Deferred() 对象来发布消息。 当服务器返回错误时，我使用notify，然后重试，直到成功或失败X次。 我想删除 jQuery 的使用，并迁移到 ES6 相关选项。 我知道
我是一名优秀的程序员,十分优秀！