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

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

  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。后面的行与此完全不一致

---

这里发生了什么？

您体验到的是

getElementsByClassName

返回一个

dynamicondelist

，这意味着它是活动的，对DOM的更改将自动反映在集合中

---

相反，使用

querySelectorAll

将返回一个

StaticNodeList

，它类似于查询发生时DOM的快照。查询后发生的任何更改都不会反映在它返回的集合中。

HTMLCollection表示它是一个动态集合，在access上重新填充，也就是说，当您稍后在控制台中展开它时。您好，您能在页面的控制台中执行相同的操作吗？可能是重复的