mutation-observers 相关问题

Mutation Observers是DOM4规范的一部分，允许在DOM元素发生变化时触发回调。

我正在使用 MutationObserver API，并希望将传入的 MutationRecord 正确应用到我存储在其他地方的树的副本。让我困惑的是removedNodes集合。当我的观察者是

javascript dom mutation-observers

回答 1 投票 0

假设我有两个 span 元素。类正在根据选择的内容更改“选择”的宽度。我只需要知道何时选择 span2 。假设我有两个 span 元素。类正在根据选择的内容更改“选择”的宽度。我只需要知道何时选择了 span2 。 <span class="swatch swatch-image span1"> <span class="swatch swatch-image span2 selected"> 我正在尝试听哪个被选中（哪个具有“选定”类），然后在其他地方显示或不显示 div。可以吗？我试过这样： let targetNode = document.getElementsByClassName('swatch swatch-image span2 selected'); const config = { attributes: true, childList: false, subtree: false, attributeFilter: ['class'] }; const callback = function(mutationsList, observer) { for (let mutation of mutationsList) { if (mutation.attributeName === "class") { var classList = mutation.target.className; if(/red/.exec(classList).length > 0) { console.log('Found match'); } } } }; const observer = new MutationObserver(callback); observer.observe(targetNode, config); observer.disconnect(); MutationObserver 是侦听所选范围的正确方法吗？我对 javascript 不熟悉，构建代码后是否需要以某种方式调用 MutationObserver？找到包含跨度和委托的最近容器 window.addEventListener('DOMContentLoaded',() => { // when page has loaded const container = document.getElementById('someContainer'); // change as needed container.addEventListener('click', (e) => { const tgt = e.target.closest('span.swatch'); if (!tgt) return; // not a swatch console.log(tgt.textContent, 'clicked') }); // somewhere else out of your control document.addEventListener('click', (e) => { const tgt = e.target.closest('span.swatch'); if (!tgt) return; // not a swatch document.querySelectorAll('span.swatch').forEach(span => span.classList.toggle('selected',span===tgt)) }); }); .selected { border: 1px solid red; } <div id="someContainer"> ... <span class="swatch swatch-image span1 selected">Span 1</span> <span class="swatch swatch-image span2">Span 2</span> ... </div>

javascript mutation-observers

回答 1 投票 0

如何向puppeteer注入mutationobserver

我想要像无头chrome中的mutationobserver一样跟踪更改的DOM。所以我学习了 puppeteer 库，但不知道如何使用。可以在 puppeteer 中跟踪 DOM 变化吗？谢谢

mutation-observers puppeteer

回答 2 投票 0

下拉菜单打开时禁用页面滚动

我正在开发一个导航栏，其中有多个下拉菜单实例。我们试图在下拉菜单打开时禁用页面滚动，并在启用下拉菜单时再次启用它。

javascript dropdown mutation-observers

回答 1 投票 0

JavaScript WEB API MutationObserver URL 更改

我是JS和WEB API的新手，是否可以使用MutationObserver来观察页面URL的突变？或者 MutationObserver 仅用于 DOM？

javascript mutation-observers

回答 1 投票 0

MutationObserver 仅在所有资源加载完毕时回调

要求我需要动态更新元素的内容，然后在加载元素及其内容后执行动画。在这种特殊情况下，元素的不透明度为...

javascript html css mutation-observers

回答 1 投票 0

为什么 MutationObserver 没有检测到随机点之后的节点？

我正在构建一个 Tampermonkey 用户脚本。我的实际脚本要复杂得多，但我可以通过以下示例进行重现。我的脚本需要在黑客新闻网站上运行。例如o...

javascript jquery-selectors tampermonkey userscripts mutation-observers

回答 1 投票 0

Javascript：识别何时出现新的第二个元素，并仅在旧元素（突变观察者）上使用函数

我知道这里有很多关于突变观察者的问题的答案。但我还没有找到解决方案。在网站上，当我单击带有

javascript dom mutation-observers

回答 1 投票 0

JSDOM 中的 MutationObserver 失败，因为参数 1 不是 Node 类型

我正在尝试使用 JSDOM 和 Jest 测试一个简单的 JavaScript 单页应用程序。出于我们的目的，index.html 是一个简单的 html 文档，其中包含标签我正在尝试使用 JSDOM 和 Jest 测试一个简单的 JavaScript 单页应用程序。就我们的目的而言，index.html 是一个简单的 html 文档，其中包含标签 <div id="app-root"></div> 和 index.js，它通过 index.html 中的 <script> 标签加载，并在<div>看起来像这样：app-root。所以运行时我的最终 HTML 是：<div class="my-embed"></div> <div id="app-root"> <div class="my-embed"></div> </div> 始终存在，并且#app-root在执行.my-embed后存在。我尝试通过使用 <script> 加载 HTML 来测试这一点，然后验证是否添加了新的 runScripts: 'dangerously'。这是我的测试脚本： <div> 当我运行此程序时，它不断出错“TypeError：无法在“MutationObserver”上执行“observe”：参数 1 不是“Node”类型。”但据我所知，我传入的 import '@testing-library/jest-dom/extend-expect' import { JSDOM } from 'jsdom' import fs from 'fs' import path from 'path' const html = fs.readFileSync(path.resolve(__dirname, '../index.html'), 'utf8'); let dom let container function waitForElm(parentElm, selector) { console.log(parentElm); console.log(parentElm.outerHTML); console.log(selector); return new Promise(resolve => { if (parentElm.querySelector(selector)) { return resolve(parentElm.querySelector(selector)); } const observer = new MutationObserver(mutations => { if (parentElm.querySelector(selector)) { resolve(parentElm.querySelector(selector)); observer.disconnect(); } }); observer.observe(parentElm, { childList: true, subtree: true }); }); } describe('index.html', () => { beforeEach(() => { dom = new JSDOM(html, { runScripts: 'dangerously', resources: "usable" }) }) it('adds a tag', async () => { container = dom.window.document.body.querySelector("#app-root") const elm = await waitForElm(container, '.my-embed'); console.log(elm) expect(container.querySelector('.my-embed')).not.toBeNull() }); }) 是一个 HTML 节点。 parentElm 我在这里缺少什么？为什么突变观察者不将 HTMLDivElement {} 视为节点传递？我相信我遇到了同样的问题。隐式存在两个不同的 JSDOM 实例：一个是在每次测试时显式实例化的（即 $> npx jest console.log waiting at VirtualConsole.onMethodCall (node_modules/jsdom/lib/jsdom/virtual-console.js:22:29) console.log HTMLDivElement {} at log (src/__tests__/index.text.js:12:11) console.log <div id="app-root"></div> at log (src/__tests__/index.text.js:13:11) console.log .my-embed at log (src/__tests__/index.text.js:14:11) ），另一个是由 new JSDOM() 全局注入的。调用jest-environment-jsdom时，使用了JSDOM的隐式全局实例。然而，传入的所有对象都是由本地实例生成的。这是 JSDOM 不允许的——请参阅关于此问题的讨论。因此，实际上，问题不在于参数不是 new MutationObserver()，而在于它是来自错误 DOM 的 Node。要解决此问题，请确保所使用的 Node 来自与 DOM 节点相同的 JSDOM 实例。这可以通过将 MutationObserver 替换为 new MutationObserver() 来实现。这样做的缺点是你现在必须传递 JSDOM（或者至少是它的 new dom.window.MutationObserver()）。或者，您可以在任何地方使用全局实例并通过其他方法设置其 HTML（例如 window 或 document.write()）。不过，其可行性将取决于确切的用例。

javascript jestjs jsdom mutation-observers

回答 1 投票 0

观察尚不存在的目标节点上的突变

是否可以在尚不存在的 DOM 节点上观察突变？例子：我的应用程序在某个时刻创建了一个 div：是否可以在尚不存在的 DOM 节点上观察突变？示例：我的应用程序在某个时刻创建了一个 div：<div id="message" data-message-content="foo" data-message-type="bar" />。我想关注这个div的创建和变化。 var mutationObserver = new MutationObserver(function(mutations){ // Some code to handle the mutation. }); mutationObserver.observe( document.querySelector('#message'), { attributes: true, subtree: true, childList: true, characterData: false } ); ); 现在这会返回一个 error，因为 #message 为 null（div 尚未创建）。 Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'. 一个明显的解决方案是观察 body 并检查是否有任何突变是由 div#Message 创建的，但这似乎是一个坏主意/或者可能对性能不利。只能观察到已有的节点。您可以在 MutationObserver 回调中使用 document.getElementById()，与枚举所有变异节点相比，它的速度非常快（另请参阅MutationObserver 的性能）。 function waitForAddedNode(params, callback) { new MutationObserver(mutations => { var el = document.getElementById(params.id); if (el) { this.disconnect(); callback(el); } }).observe(params.parent || document, { subtree: !!params.recursive || !params.parent, childList: true, }); } 用途： waitForAddedNode({ id: 'message', //parent: document.querySelector('.container'), recursive: true, }, el => { console.log(el); });

javascript mutation-observers

回答 1 投票 0

documentElement节点使用innerHTML时不会触发MutationObserver

我发现了 MutationObserver 接口，用于拦截和分析 DOM 中的更改。它工作得很好，我已经成功拦截了所有 DOM 更改...除了 DOM c...

javascript dom dom-events innerhtml mutation-observers

回答 1 投票 0

“MutationObserver”上的“观察”：参数 1 不是“Node”类型

我正在创建一个 Chrome 扩展程序，并尝试在 gMail 撰写框的“发送”按钮旁边包含一个小文本。我正在使用 MutationObserver 来了解撰写框窗口何时出现。我是...

javascript google-chrome-extension gmail gmail-api mutation-observers

回答 5 投票 0

使用 MutationObserver 仅观察特定属性的属性变化

我有一个项目列表，我正在使用 Mutation Observer 来检查项目是否从该列表中添加或删除。代码如下所示：函数 TrackListChange(elementId) {

javascript jquery html dom mutation-observers

回答 2 投票 0

如何修复使用 WIJMO 创建 flexGrid 动态列时为同步“DOMNodeInserted”添加的[弃用]监听器？

警告控制台 <wjGrid.FlexGrid id='grid-main-content' initialized={initializeGrid.bind(this)} itemsSource={this.props.dataForGrid} allowMerging="All" autoGenerateColumns={false} headersVisibility='Column' //hide column header as row header in wijmo flexgrid isReadOnly={true} allowSorting={false} selectionMode='None' allowResizing='None' allowDragging='None' frozenColumns={4}> <wjGrid.FlexGridColumn key={0} header='' binding='' minWidth={20} width={130} > </wjGrid.FlexGridColumn> <wjGrid.FlexGridColumn key={1} header='' binding='' minWidth={20} width={100} > </wjGrid.FlexGridColumn> <wjGrid.FlexGridColumn key={2} header='' binding='' minWidth={20} width={100} > </wjGrid.FlexGridColumn> <wjGrid.FlexGridColumn key={3} header='' binding='' minWidth={3} width={3} cssClass='padding-0' > </wjGrid.FlexGridColumn> {this.generateColumn(this.props.arrayHeader)} </wjGrid.FlexGrid> generateColumn = (params) => { let arrayColumn = []; // create column header base on each item for (let i = 0; i < paramslength; i++) { resultColumn.push(<wjGrid.FlexGridColumn key={i+4} header={} name={ } binding={'' + i} minWidth={160} width="*"> </wjGrid.FlexGridColumn>) } } return arrayColumn; } /** * initialize grid * @param {wijmo grid} grid */ export function initializeGrid(grid) { grid.rows.defaultSize = 16; grid.columnHeaders.rows.defaultSize = 18; // add three extra column header rows var hr = new wjcGrid.Row(); grid.columnHeaders.rows.push(hr); grid.columnHeaders.rows[0].allowMerging = true; grid.columnHeaders.rows[0].align = 'center'; grid.columnHeaders.rows[1].backgroundColor = '#182e38'; grid.refresh(true); } 使用 FlexGrid 列组件会导致 DOMNodeInserted 警告文件类型限制发生环境出现在 Angular 模块、Vue 模块、React 模块和 Web Components 模块中情况有一个解决方法细节 [弃用] 为同步“DOMNodeInserted”DOM 突变事件添加了侦听器。此事件类型已弃用 ()，并且正在努力将其从此浏览器中删除。使用此事件侦听器将导致今天的性能问题，并代表未来不兼容的风险。考虑使用 MutationObserver 代替。我尝试在函数初始化设置网格中渲染列，但列是动态的并且网格不会重新渲染。我使用“@grapecity/wijmo.all”：“^5.20202.732”。我可以做什么来修复它？请帮助我！我有同样的问题，我正在寻找答案..(T_T)

reactjs deprecated mutation-observers wijmo

回答 1 投票 0

在graphql突变中跟踪图像上传进度

我正在运行 graphql 突变以将图像上传到服务器。并且操作成功。我唯一的问题是如何跟踪前端图像上传的进度？百分之几...

reactjs angular graphql apollo-client mutation-observers

回答 1 投票 0

MutationObserver 太慢，无法在动态 iframe 中重新定义 navigator 属性？

我正在对重新定义 navigator.userAgent 的 Chrome 扩展进行一些更新，我在用 MutationObserver 替换 DOMNodeInserted 时遇到了这种行为.. 这个问题很笼统，而且

javascript navigator mutation-observers

回答 1 投票 0

我希望突变观察者能够监听其目标节点本身是否在javascript中被删除

我正在目标节点上使用突变观察器。如果任何子节点或属性发生更改，它就会触发。但我有一个情况，我必须处理目标节点本身被删除的情况。这不是...