Javascript 在不使用jQuery的情况下迭代并修改通过Ajax添加的DOM元素

我正在开发一个小的Firefox插件，它使用

PageMod

处理网页中加载的图像元素。我在web上看到过使用jQuery的示例，但由于我正在为每个网页添加内容脚本，添加jQuery可能会造成无法弥补的损害

由于Firefox支持

MutationObserver

，我尝试了以下几点：

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";
}

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

发生了什么：

去

开始滚动，直到动态加载图像

请注意，它们没有改变

I

console.log（）

every

.tagName

，当我将鼠标悬停在图像上时，只看到

p

和

#text

我需要什么

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

如果可以用纯JavaScript和

MutationObserver

来完成，那就太棒了

否则，如果我能发现一些元素已经被加载以再次通过页面的所有元素，那就可以了，但不会膨胀

我希望我把事情弄清楚一点

---

任何帮助都将不胜感激。

您的错误是认为所有节点实际上都有一个

querySelectorAll

方法。例如，文本节点不会！ 因此，您调用了一个不存在的方法，该方法抛出了一个异常并提前结束了处理（因为imgur.com上的第一个变异节点实际上是一个文本节点）

这是我想到的，你想做什么，ecma-6-1有点：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";
}

var observer=新的突变观察者（函数（突变）{
for（突变的var m）{
for（m.addedNodes的var节点）{
如果（！node | |！node.queryselectoral）{
//并非所有节点都支持querySelectorAll，例如文本节点。
继续；
}
for（node.querySelectorAll（“img”）的var 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；
对于（变量i=0；i

这个问题似乎离题了，因为它缺少足够的信息来诊断问题。更详细地描述你的问题或问题本身。就目前而言，您的要求太不具体了，我甚至无法理解您到底想要实现什么。能够做你想做的事；它在小提琴上对你有用，但在插件上不行吗？@AndrewVermie我马上测试一下。@AndrewVermie它在插件上不起作用。我将提供您示例中的代码作为nmaier请求的测试用例。@nmaier我希望我已经澄清了一点。英语不是我的第一语言，它很好用。非常感谢你。同一天两次：）只需注意：由于您已经使用了ECMA6功能，我将使用

let

而不是

var

来进行循环，或者在一个地方写入

var

，以便第一眼就可以清楚地看到哪些变量绑定到范围（）@t.niese谢谢。我有C/C++系统编程背景，但我对这些问题不太精通。恩迈尔和你自己为我提供了一些非常重要的澄清。你们中有谁能推荐一些推荐的阅读材料（MDN文档除外），这样我以后就可以避免这些类型的错误了吗？当我寻找这类信息时，我通常会遇到jQuery或者如何使网页文本闪烁，而这些都不太有用。@Sebastian LaurenţiuPlesciuc：目前我没有。道格拉斯·克罗克福德（Douglas Crockford）倾向于有很好的解释，可能是看这段视频：这是一个很好的起点，可以大致了解问题所在。但是一般来说，像：

scope

、

closures

、

var

、

Promise

、

requirejs/adm

和许多库的

异步

行为都是您应该知道的事情。