javascript - 无需 jQuery 即可迭代并修改通过 Ajax 添加的 DOM 元素

Question

我正在开发一个小型 Firefox 插件，它使用 PageMod 来处理网页中加载的图像元素。我在网上看到过使用 jQuery 的示例，但由于我要向每个网页添加内容脚本，因此添加 jQuery 可能会造成无法挽回的损害。

由于 Firefox 支持 MutationObserver 我尝试执行以下操作，感谢 AndrewVermie :

content.js

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {

    if(mutation.tagName == "IMG")
    {
        //I'm not sure this object can be treated as a DOM Element (?)
        mutation.src = "http://s6.tinypic.com/15npphk_th.jpg";
    }

    for (var i = 0; i < mutation.addedNodes.length; ++i) {
          var node = mutation.addedNodes[i],
              matches = [].slice.call(node.querySelectorAll('img'));

          for (var j = 0; j < matches.length; ++j) {
              var img = matches[j];
              img.src = "http://s6.tinypic.com/15npphk_th.jpg";
          }
      }
   });
});

var config = { attributes: true, childList: true, subtree: true, characterData: true};
observer.observe(window.document, config);


var elements = document.getElementsByTagName("img");
var elementsLength = elements.length;
for (var i = 0; i < elementsLength; i++) 
{
    elements[i].src = "http://s6.tinypic.com/15npphk_th.jpg";
}

ma​​in.js

pageMod.PageMod({
    include: "*",
    contentScriptWhen: 'ready',
    contentScriptFile: [self.data.url("content.js")],
    onAttach: //...
    }
});

发生了什么:

1. 转到http://imgur.com/
2. 开始滚动，直到动态加载图像
3. 请注意，它们没有改变

我 console.log() 每个 .tagName 并且当我悬停时只看到 p 和 #text超过图像。

我需要什么

迭代注入(inject)脚本的网页中动态加载的每个元素，并能够修改元素的属性。

如果它可以用纯 JavaScript 来完成，无论有没有 MutationObserver，那都会非常出色。

否则，如果我能发现某些元素已被加载并再次重复浏览页面的所有元素，那就可以了，但不会膨胀。

我希望我已经把事情弄清楚了一点。

任何帮助将不胜感激。

Answer 1

您在这里的错误是认为所有节点实际上都有一个 querySelectorAll 方法。例如。文本节点没有!因此，您调用了一个不存在的方法，该方法引发了异常并提前结束了处理(因为 imgur.com 上的第一个突变节点实际上是一个文本节点)。

这是我想出的，似乎可以满足您的需求，ecma-6 化了一点:p。我的内容脚本:

var observer = new MutationObserver(function(mutations) {
  for (var m of mutations) {
    for (var node of m.addedNodes) {
      if (!node || !node.querySelectorAll) {
        // Not all nodes support querySelectorAll, e.g. text nodes.
        continue;
      }
      for (var img of node.querySelectorAll("img")) {
        img.src = "http://s6.tinypic.com/15npphk_th.jpg";
      }
    }
  }
});

var config = { attributes: true, childList: true, subtree: true, characterData: true};
observer.observe(window.document, config);

var elements = document.getElementsByTagName("img");
var elementsLength = elements.length;
for (var i = 0; i < elementsLength; i++) {
    elements[i].src = "http://s6.tinypic.com/15npphk_th.jpg";
}