Tampermonkey 脚本中 getElementsByTagName 的异常行为答案

【问题标题】：Stange behaviour with getElementsByTagName in Tampermonkey scriptTampermonkey 脚本中 getElementsByTagName 的异常行为
【发布时间】：2019-11-17 06:12:10
【问题描述】：

我的目标：我有一个非常复杂的网页，我想从中提取一些信息。信息包含在一个 div 中。但是这个 div 没有名字，而且页面上有无数个 div。

我发现，页面只有七个，第二部分包含我正在搜索的 div。好的，这样的篡改脚本应该可以工作：

allSection = document.getElementsByTagName('section');
console.log ("First Section", allSection );
console.log ("Length All Section", allSection.length);

当我打印 getElementByTagname 的结果时，它有七个部分（如预期的那样）。 Chrome 控制台以非常漂亮的 prittyprint 显示 HTMLCollection。我可以在那里找到我的信息。

但是下一行已经说，HTMLCollection 只有 1 个元素长

甚至陌生人：我可以使用 allSection[0] 访问第一个部分，但不能使用 allSection[1] 访问第二个部分。这与打印的长度 (1) 一致，但与打印的 HTMLCollection 不一致。

有什么想法吗？

【问题讨论】：

请提供足以重现问题的代码。
如果您需要稳定的列表，请使用document.querySelectorAll('section')。 getElementsByTagName 函数返回一个 live HTMLCollection（即它会根据需要更改以总是反映 DOM）而 querySelectorAll 返回一个固定列表，它只会反映查询时 DOM 是什么样的。
添加allSection = [...allSection]，看看是否还有问题。
@addis：感谢您提醒我将问题减少到最低限度。会做。我正在检查的页面来自一家大型 Internet 服务提供商。 @mike：我也使用了querySelectorAll，不知何故类似效果，列表只有一个元素长。它不再是 HTMLCollection，而是 NodeList。 @ trincot2：需要让自己熟悉你的评论，而不是完全理解你的建议。但感谢 cmets。

标签： javascript tampermonkey

【解决方案1】：

抱歉，答案很简单。

我正在寻找的元素尚未加载。它们是 AJAX 调用的结果。所以基本上，当脚本正在运行，元素不存在。当我查看 chrome 控制台时，元素存在并且控制台能够向他们展示。

解决方案：我有一个粗略的解决方案，等待几毫秒直到元素被加载：

setTimeout(function() {}, 2000);

【讨论】：

如果您需要更复杂的解决方案，请查找 dom 观察者以观察 HTML 的变化并对其做出反应。