getElementsByClassName 在 chrome 扩展内容脚本中的行为异常答案

【问题标题】：getElementsByClassName behaves strangely in chrome extension content scriptgetElementsByClassName 在 chrome 扩展内容脚本中的行为异常
【发布时间】：2018-07-18 14:14:34
【问题描述】：

我创建了一个执行以下操作的内容脚本：

  var stuff = document.getElementsByClassName("actual-log");
  console.log(stuff);
  console.log(stuff[0]);
  console.log(stuff.length);

我得到以下输出：

HTMLCollection []0: div.actual-log1: div.actual-log2: div.actual-log3: div.actual-log4: div.actual-log5: div.actual-log6: div.actual-log7: div.actual-log8: div.actual-log9: div.actual-log10: div.actual-log11: div.actual-log12: div.actual-log13: div.actual-log14: div.actual-log15: div.actual-log16: div.actual-log17: div.actual-log18: div.actual-log19: div.actual-log20: div.actual-log21: div.actual-loglength: 22__proto__: HTMLCollection
main.js:4 undefined
0

这个输出对我来说似乎完全不可能。第一行明明是返回了一堆结果，而返回的HTMLCollection明明长度是22，后面几行就完全不符了。

这是怎么回事？

【问题讨论】：

HTMLCollection 表示它是一个动态集合，在访问时重新填充，也就是说，当您稍后在控制台中展开它时。
您好，您可以在页面的控制台中执行同样的操作吗？
Chrome displays different object contents on expand的可能重复

标签： javascript dom google-chrome-extension content-script

【解决方案1】：

您的体验是getElementsByClassName 返回一个DynamicNodeList，这意味着它是实时的，对 DOM 的更改将自动反映在集合中。

相比之下，使用querySelectorAll 将返回一个StaticNodeList，这就像查询发生时DOM 的快照。查询后发生的任何更改都不会反映在它返回的集合中。

【讨论】：