Question

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

  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个长度。后续行与此完全不一致。

这里发生了什么？

Answer 1

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

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

getElementsByClassName在chrome扩展内容脚本

1 个答案: