调用document.getElementsByTagName("Button")无法获取扩展新增按钮的问题求助

• 核心问题出在document.getElementsByTagName("Button")的返回值类型上：它返回的是HTMLCollection——这是一个和DOM实时绑定的动态集合，但浏览器控制台默认只会显示你执行代码那一刻的集合快照，不会自动同步DOM更新后的内容。
• 点击扩展新增按钮后，DOM里确实已经存在新元素，但之前控制台输出的那个HTMLCollection只是一个"引用占位符"，控制台不会主动去重新拉取最新的DOM元素。
• 当你右键inspect新增按钮时，DevTools会触发DOM检查的刷新机制，此时再查看控制台里的那个集合，它会重新去DOM中查询当前所有符合条件的元素，所以你能看到新增的按钮了。

验证/解决方式 #

• 每次需要获取最新按钮时，直接重新执行document.getElementsByTagName("Button")，不要复用之前的变量引用；
• 或者把动态集合转成静态数组，固定当前DOM的状态：

  Array.from(document.getElementsByTagName("Button"))
  

  转成数组后，不管后续DOM如何变化，这个数组里都是执行代码那一刻的元素。

内容的提问来源于stack exchange，提问作者Sahil Bagdi