Mutation Observers是DOM4规范的一部分，允许在DOM元素发生变化时触发回调。
我需要你的帮助。我有一小段代码，我试图用它来实现以下逻辑 - 我有一个菜单列表。如果我有root角色，不要删除任何东西，但如果非root角色...
iframe 主体上的 ResizeObserver 在 Chrome 和 Firefox 上的行为不同
我正在尝试使用 ResizeObserver 来监听文档主体高度的变化，从而调整包含它的 iframe 的大小。 Ch 上一切似乎都运行良好...
我正在构建一个库，它与模板标签交互，并监视可能使用 MutationObserver 添加到页面的新标签。 const UpgradeNewNodes = (mutationRecor...</desc> <question vote="0"> <p>我正在构建一个库，它与模板标签交互，并监视可能使用 MutationObserver 添加到页面的新标签。</p> <pre><code><script> const upgradeNewNodes = (mutationRecords) => { mutationRecords.forEach((mutationRecord) => { mutationRecord.addedNodes.forEach((newNode) => { if (newNode.matches?.('template')) { console.log(newNode.content.childNodes) } }); }); }; const observer = new MutationObserver(upgradeNewNodes); observer.observe(document, { subtree: true, childList: true }); </script> <template> <span>Beginning</span> <script> console.log('foo') </script> <span>Ending</span> </template> </code></pre> <p>但是，当我的突变观察者拾取此模板标签时，它只能看到<strong>直到脚本标签</strong>。</p> <pre><code>// [object NodeList] (4) [#text,<span/>,#text,<script/>] </code></pre> <p>Codepen 链接：<a href="https://codepen.io/JRJurman/pen/WNLEaqp?editors=1001" rel="nofollow noreferrer">https://codepen.io/JRJurman/pen/WNLEaqp?editors=1001</a></p> <p><em>我目前的假设是，HTML 解析器在遇到 script 标签时会停止。</em></p> <p>有没有办法知道模板何时完全加载？是否有其他方法可以逐步捕获添加到页面的模板标签（MutationObserver 除外）？</p> </question> <answer tick="false" vote="0"> <p>这里的一个潜在选项似乎是在模板标签之后<strong>监视节点</strong> - 这些节点几乎总是保证存在，因为元素之间总是存在 TEXT 节点。</p> <pre><code><script> const upgradeNewNodes = (mutationRecords) => { mutationRecords.forEach((mutationRecord) => { mutationRecord.addedNodes.forEach((newNode) => { // check if this node is after a template (if it is, process that template) // this is almost always guaranteed to exist, and be a TEXT node if (newNode.previousSibling?.matches?.('template')) { console.log(newNode.previousSibling.content.childNodes) } }); }); }; const observer = new MutationObserver(upgradeNewNodes); observer.observe(document, { subtree: true, childList: true }); </script> <template> <span>Beginning</span> <script> console.log('foo') </script> <span>Ending</span> </template> </code></pre> <p>结果：</p> <pre><code>// [object NodeList] (7) [#text,<span/>,#text,<script/>,#text,<span/>,#text] </code></pre> <p>Codepen 链接：<a href="https://codepen.io/JRJurman/pen/jOXLQmY?editors=1001" rel="nofollow noreferrer">https://codepen.io/JRJurman/pen/jOXLQmY?editors=1001</a></p> </answer> </body></html>
将窗口 MutationObserver 与 Angular HostBinding 结合使用时，选项卡崩溃
在我的应用程序中添加 MutationObserver 时遇到了一个非常奇怪的错误。 我的 Angular 组件之一正在使用 HostBinding 到元素的 attr.style 属性，这工作正常......
单个 MutationObserver 对象可以观察多个目标吗？
我想使用 MutationObserver 对象来观察某些 DOM 节点的更改。 文档给出了创建 MutationObserver 对象并将其注册到目标上的示例。 // 选择...
我想检测输入字段中的文本/值何时发生变化。即使我用js改变了值，我也想检测到这个变化。 这是我迄今为止在小提琴演示中尝试过的内容。 HTML： 我想检测输入字段中的文本/值何时发生变化。即使我用js改变了值，我也想检测到这个变化。 这是我迄今为止在小提琴演示中尝试过的内容。 HTML： <input type="text" id="exNumber"/> JavaScript： var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { // console.log('Mutation type: ' + mutation.type); if ( mutation.type == 'childList' ) { if (mutation.addedNodes.length >= 1) { if (mutation.addedNodes[0].nodeName != '#text') { // console.log('Added ' + mutation.addedNodes[0].tagName + ' tag.'); } } else if (mutation.removedNodes.length >= 1) { // console.log('Removed ' + mutation.removedNodes[0].tagName + ' tag.') } } if (mutation.type == 'attributes') { console.log('Modified ' + mutation.attributeName + ' attribute.') } }); }); var observerConfig = { attributes: true, childList: false, characterData: false }; // Listen to all changes to body and child nodes var targetNode = document.getElementById("exNumber"); observer.observe(targetNode, observerConfig); 要了解正在发生的情况，有必要明确 attribute（内容属性）和 property（IDL 属性）之间的区别。我不会对此进行扩展，因为在 SO 中已经有很好的答案涵盖了该主题： HTML 中的属性和属性 .prop() 与 .attr() .setAttribute 与 .attribute= 背后发生了什么？ 当您通过输入或通过 JS 更改 input 元素的内容时： targetNode.value="foo"; 浏览器更新 value 属性，但不更新 value 属性（而是反映 defaultValue 属性）。 然后，如果我们查看 MutationObserver 的 spec，我们会发现 attributes 是可以使用的对象成员之一。因此，如果您显式设置 value 属性： targetNode.setAttribute("value", "foo"); MutationObserver 将通知属性修改。但是规范列表中没有类似 properties 的内容：无法观察到 value 属性。 如果您想检测用户何时更改输入元素的内容，input事件是最直接的方法。如果您需要捕获 JS 修改，请使用 setInterval 并将新值与旧值进行比较。 检查这个SO问题以了解不同的替代方案及其局限性。 我稍微修改了Shawn的方法并想分享它。不敢相信实际上有解决方案。 在输入框中键入内容以查看默认行为。现在，打开 DevTools 并选择输入元素，然后更改其值，例如$0.value = "hello"。检查 UI 与 API 的差异。看来 UI 交互不会直接修改 value 属性。如果是的话，它也会记录 "...changed via API..."。 let inputBox = document.querySelector("#inputBox"); inputBox.addEventListener("input", function () { console.log("Input value changed via UI. New value: '%s'", this.value); }); observeElement(inputBox, "value", function (oldValue, newValue) { console.log("Input value changed via API. Value changed from '%s' to '%s'", oldValue, newValue); }); function observeElement(element, property, callback, delay = 0) { let elementPrototype = Object.getPrototypeOf(element); if (elementPrototype.hasOwnProperty(property)) { let descriptor = Object.getOwnPropertyDescriptor(elementPrototype, property); Object.defineProperty(element, property, { get: function() { return descriptor.get.apply(this, arguments); }, set: function () { let oldValue = this[property]; descriptor.set.apply(this, arguments); let newValue = this[property]; if (typeof callback == "function") { setTimeout(callback.bind(this, oldValue, newValue), delay); } return newValue; } }); } }<input type="text" id="inputBox" placeholder="Enter something" /> 价值属性可以观察到，不要浪费时间。 function changeValue (event, target) { document.querySelector("#" + target).value = new Date().getTime(); } function changeContentValue () { document.querySelector("#content").value = new Date().getTime(); } Object.defineProperty(document.querySelector("#content"), "value", { set: function (t) { alert('#changed content value'); var caller = arguments.callee ? (arguments.callee.caller ? arguments.callee.caller : arguments.callee) : '' console.log('this =>', this); console.log('event => ', event || window.event); console.log('caller => ', caller); return this.textContent = t; } });<form id="form" name="form" action="test.php" method="post"> <input id="writer" type="text" name="writer" value="" placeholder="writer" /> <br /> <textarea id="content" name="content" placeholder="content" ></textarea> <br /> <button type="button" >Submit (no action)</button> </form> <button type="button" onClick="changeValue(this, 'content')">Change Content</button> 这可以工作并保留和链接原始的 setter 和 getter，因此有关您领域的其他所有内容仍然有效。 var registered = []; var setDetectChangeHandler = function(field) { if (!registered.includes(field)) { var superProps = Object.getPrototypeOf(field); var superSet = Object.getOwnPropertyDescriptor(superProps, "value").set; var superGet = Object.getOwnPropertyDescriptor(superProps, "value").get; var newProps = { get: function() { return superGet.apply(this, arguments); }, set: function (t) { var _this = this; setTimeout( function() { _this.dispatchEvent(new Event("change")); }, 50); return superSet.apply(this, arguments); } }; Object.defineProperty(field, "value", newProps); registered.push(field); } } 一个监控输入属性的小管理器： var observerList = []; var observePropertyChangeStarted = false; function observePropertyChange(input, propertyName, callback) { observerList.push({ input: input, propertyName: propertyName, state: input[propertyName], callback: callback }); if (!observePropertyChangeStarted) { observePropertyChangeStarted = true; setInterval(_ => { for (const obj of observerList) { const state = obj.input[obj.propertyName]; if (state !== obj.state) { obj.state = state; obj.callback(obj.input); } } }, 100); } } 然后只需监听任何输入属性： const checkBoxInput = document.querySelector('input[type="checkbox"]'); observePropertyChange(checkBoxInput, 'checked', (target) => { // myActions(); }); checkBoxInput.checked = false; const rangeInput = document.querySelector('input[type="range"]'); observePropertyChange(rangeInput , 'value', (target) => { // myActions(); }); rangeInput.value = 10; 该函数仅调用一次“setInterval”来限制资源的使用。
是否可以使用 mutationObserver 检测 DOM 中的新子节点并将 elementHandle 对象返回给 puppeteer？
使用 mutantObserver 检测 DOM 中的新节点，并通过 page.exposeFunction 在 puppetteer 中返回一个元素句柄。 有谁知道是否有可能与 mutationObserver 一起工作，以便当...
我正在使用 WordPress 主题，需要修改计数器动画的输出。 在加载页面时，有一个像这样的空跨度： 啊……
检查使用 JS 值动态创建的输入（数字）并使用 MutationObserver 计算总数
序言：搜索基于 Diego 关于动态字段 JS 创建的回答和 Anthony Awuley 关于创建字段的 MutationObserver 的回答 我花了很多时间（搜索和）找到一个
Reactjs 网络应用程序 - MutationObserver 在 Safari 浏览器中的使用不如预期
我有一个反应 web 应用程序，它呈现 2 个调整垂直大小的文本区域（使用 CSS）。我的要求是，当用户调整一个文本区域的大小时，代码会捕获它并将高度应用于...
mutation observer回调函数中Mutation list的typescript类型是什么
回调函数中mutationList的typescript类型是什么？ const targetNode = document.getElementById("some-id"); const config = { 属性：true，childList：true，子树：...
我是编程新手，我没有这么高深的知识，我正在开发代码来记录从 mysql 数据库中的页面检索到的数据。 使用： **nodejs、木偶、续集、快递 ** 我会……
我正在尝试为 Airbnb 构建一个 chrome 扩展。目前我正在尝试将一个 div（反应）附加到每个 listingDiv 的子组件，因为 airbnb 在网格中呈现它们。 通常要实现这一点，我：...
我有一个动态产品列表。在页面加载时，产品和数据列表由 API 填充。当有人对产品进行排序或过滤时，数据会刷新并重新绘制到页面上。小...
添加子项时，什么会导致整个文档和子树上的 Mutation Observer 不触发？
有时突变观察者回调不会在我期望的时候触发。 如果我在开发人员工具控制台中运行此代码： // 突变观察者的回调 callbackForAllChanges = 函数 (
我的 useEffect 中有一个 mutationObserver，如下所示： const elem = document.getElementById('map__menu'); const observer = new MutationObserver(() => { 控制台日志（标记）； ...
在 MutationObserver 中使用 document.write 会导致浏览器卡住并且 document.readyState 总是“正在加载”
免责声明：我知道为什么我应该避免使用 document.write 和 document.write 清除页面。 假设我需要在加载 DOM 时将同步（阻塞）脚本注入到 DOM 中（文档...
如果突变是值属性的变化，MutationObserver 不起作用
我在一个包含多个输入的页面上有一个表单。如果有人通过浏览器控制台中的代码（或浏览器扩展或浏览器自动化工具，如 puppeteer）将任何内容放入我的表单，我想处理事件......
在此页面上，我希望我的 Chrome 扩展程序等待所有页面元素完全加载。我怎么做？第一个 MutationObserver 有效，第二个无效。 var waitForBody = 函数...
MutationObserver 的属性更改仅在代码在循环内时发现
我在使用 js 和 MutationObserver 检测 html 元素的属性更改时遇到了一些问题。这是代码： document.addEventListener("DOMContentLoaded", function() { 常数