基本上我想在DIV的内容发生变化时执行脚本.由于脚本是独立的(chrome扩展和网页脚本中的内容脚本),我需要一种方法来简单地观察DOM状态的变化.我可以设置投票,但这似乎很草率.
我有兴趣使用MutationObserver检测是否在HTML页面中的任何位置添加了某个HTML元素.例如,我会说我想检测是否<li>在DOM中的任何地方添加了任何内容.
MutationObserver到目前为止,我看到的所有示例只检测节点是否添加到特定容器中.例如:
一些HTML
<body>
...
<ul id='my-list'></ul>
...
</body>
MutationObserver 定义
var container = document.querySelector('ul#my-list');
var observer = new MutationObserver(function(mutations){
// Do something here
});
observer.observe(container, {
childList: true,
attributes: true,
characterData: true,
subtree: true,
attributeOldValue: true,
characterDataOldValue: true
});
所以在这个例子中,MutationObserver设置为观察一个非常确定的容器(ul#my-list)以查看是否有任何<li>附加到它的容器.
这是一个问题,如果我想不那么具体,并注意<li>整个HTML身体,如下所示:
var container = document.querySelector('body');
我知道它适用于我为自己设置的基本示例......但是不建议这样做吗？这会导致性能不佳吗？如果是这样,我将如何检测和衡量性能问题？
我想也许有一个原因,所有的MutationObserver例子都是如此具体的目标容器......但我不确定.
我需要隐藏html页面中的一个部分:
<h1 data-ng-show="!menuPinned && !isSaaS" class="logo floatLeft" aria-hidden="false"><span>XXX </span><span style="font-weight: bold;">XXX </span><span>XXXXX</span></h1>
以下代码在Chrome dev中正常运行.工具
var ibmlogo = document.querySelectorAll('h1.logo.floatLeft');
ibmlogo[1].remove();
但是当我在脚本处于活动状态时加载页面时,部分(h1)将不会消失.我相信这是因为当脚本运行时,DOM尚未完成加载,因此脚本无法找到选择器.
我尝试了很多不同的东西(例如window.onLoad),但我的脚本仍然无效.最后一次尝试(失败)如下:
var logo = document.querySelectorAll('h1.logo.floatLeft');
logo.onload = function() {removeLogo()};
function removeLogo(){
console.log("### logo array lenght: " + logo.length);
logo[1].remove();
};
有什么建议？谢谢Giovanni
这是我的第一个 Chrome 扩展程序。我正在构建一个扩展来替换页面上的文本。
提供的代码适用于加载 DOMContent 加载的任何内容。但是，在使用某种无限滚动的页面上，加载新内容时不会发生文本替换。
我需要它来对稍后添加到页面的任何内容运行文本替换。
我曾尝试使用 onscroll 事件侦听器，但这既笨拙又昂贵。我相信有更好的方法。
我已经研究过使用清单 run_at，但还没有找到使用它的方法。
let elements = document.getElementsByTagName('*');
let replacements = {
"first to replace": "new text",
"second to replace": "also new text"
};
let keys = Object.keys(replacements);
RegExp.quote = (str) => {
return str.replace(/([.?*+^$[\]\\(){}|-])/g, "\\$1");
};
let makeItAwesomer = () => {
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
for (var j = 0; j < element.childNodes.length; j++) {
let node = element.childNodes[j];
if …javascript google-chrome-extension dom-events infinite-scroll
我想更改一些 dom 内容，以便所有输入字段值都是""网页的，然后用户才能看到它。我该怎么做？有什么办法可以做到这一点吗？谢谢。