- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
fiddle :https://jsfiddle.net/7gj26hqu/
我想要一个MutationObserver
可以检测自身内部的所有新节点。在示例中,我设置了 {childList: true, subtree: true}
, 但是 div#nested
未出现在 MutationObserver
中(显示在控制台中)。
如何让观察者检测到子节点的任何深度?
const domObserver = new MutationObserver((records) => {
records.forEach((record) => {
console.log(record)
})
})
domObserver.observe(document.querySelector('#frame'), {childList: true, subtree: true})
// copy child nodes out of #template (as a string) and inject them into #frame for the observer to detect
document.querySelector('#frame').innerHTML = document.querySelector('#template').innerHTML
<div id="frame"></div>
<div id="template" style="display: none;">
<div class="level-1">
<div class="level-2">
<div id="nested">
I exist in the DOM but am not being seen by the MutationObserver
</div>
</div>
</div>
<div class="level-1">
<div class="level-2">
</div>
</div>
<div class="level-1">
<div class="level-2">
</div>
</div>
</div>
最佳答案
看起来当一个被观察的容器有它的 innerHTML
set,容器的 child 被清空,然后新的 child 被完整地添加。使用同步观察者(以便您可以看到正在发生的事情),查看添加元素时子节点是如何存在的:
// Look at results in browser console:
window.addEventListener('DOMNodeInserted', (e) => {
console.log(e.path[0].childNodes.length);
});
document.querySelector('#frame').innerHTML = document.querySelector('#template').innerHTML
<div id="frame"></div>
<div id="template" style="display: none;">
<div class="level-1">
<div class="level-2">
<div id="nested">
I exist in the DOM but am not being seen by the MutationObserver
</div>
</div>
</div>
<div class="level-1">
<div class="level-2">
</div>
</div>
<div class="level-1">
<div class="level-2">
</div>
</div>
</div>
subtree: true
没有看到附件操作。
subtree: true
.
const recurse = (parent) => {
console.log(parent);
if (parent.childNodes) {
[...parent.childNodes].forEach(recurse);
}
};
const domObserver = new MutationObserver((records) => {
for (const record of records) {
for (const node of record.addedNodes) {
recurse(node);
}
}
})
domObserver.observe(document.querySelector('#frame'), {childList: true, subtree: true})
// copy child nodes out of #template (as a string) and inject them into #frame for the observer to detect
document.querySelector('#frame').innerHTML = document.querySelector('#template').innerHTML
<div id="frame"></div>
<div id="template" style="display: none;">
<div class="level-1">
<div class="level-2">
<div id="nested">
I exist in the DOM but am not being seen by the MutationObserver
</div>
</div>
</div>
<div class="level-1">
<div class="level-2">
</div>
</div>
<div class="level-1">
<div class="level-2">
</div>
</div>
</div>
const frame = document.querySelector('#frame');
const domObserver = new MutationObserver(() => {
// If the container's innerHTML was assigned to, iterate over all descendants:
const treeWalker = document.createTreeWalker(frame);
const nodes = [];
let currentNode = treeWalker.currentNode;
while (currentNode) {
nodes.push(currentNode);
currentNode = treeWalker.nextNode();
}
console.log(nodes);
});
domObserver.observe(frame, {
childList: true,
subtree: true
})
// copy child nodes out of #template (as a string) and inject them into #frame for the observer to detect
document.querySelector('#frame').innerHTML = document.querySelector('#template').innerHTML
<div id="frame"></div>
<div id="template" style="display: none;">
<div class="level-1">
<div class="level-2">
<div id="nested">
I exist in the DOM but am not being seen by the MutationObserver
</div>
</div>
</div>
<div class="level-1">
<div class="level-2">
</div>
</div>
<div class="level-1">
<div class="level-2">
</div>
</div>
</div>
关于javascript - MutationObserver 没有在子节点上拾取,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61314922/
我正在使用 Gunicorn 为 Django 应用程序提供服务,它工作正常,直到我将其超时时间从 30 秒更改为 900000 秒,我不得不这样做,因为我有一个用例需要上传和处理一个巨大的文件(过程
我有一个带有非常基本的管道的Jenkinsfile,它可以旋转docker容器: pipeline { agent { dockerfile { args '-u root' } } stag
在学习 MEAN 堆栈的过程中,我遇到了一个问题。每当我尝试使用 Passport 验证方法时,它都不会返回任何响应。我总是收到“localhost没有发送任何数据。ERR_EMPTY_RESPONS
在当今的大多数企业堆栈中,数据库是我们存储所有秘密的地方。它是安全屋,是待命室,也是用于存储可能非常私密或极具价值的物品的集散地。对于依赖它的数据库管理员、程序员和DevOps团队来说,保护它免受所
是否可以创建像图片上那样的边框?只需使用 css 边框属性。最终结果将是没 Angular 盒子。我不想添加额外的 html 元素。我只想为每个 li 元素添加 css 边框信息。 假设这是一个 ul
我是一名优秀的程序员,十分优秀!