getElementsByClassName 在 chrome 扩展内容脚本中表现异常

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 return 一个 DynamicNodeList，这意味着它是实时的并且对 DOM 的更改将自动反映在集合中。

相比之下，使用 querySelectorAll 将 return 变成 StaticNodeList，这就像查询发生时 DOM 的快照。查询后发生的任何更改都不会反映在它 returns.

的集合中

getElementsByClassName 在 chrome 扩展内容脚本中表现异常

getElementsByClassName behaves strangely in chrome extension content script

javascript

dom

google-chrome-extension

content-script