Javascript 将JS添加到HTML页面，浏览器差异

我有一个简单的页面，需要非常小的JS功能。当我使用标签时，我会在不同的浏览器上获得不同的行为，这取决于标签的位置

在Chrome65和Firefox59上，标签的位置无关紧要，代码在呈现页面之前执行。假设我有，在它之前，我有使用该DOM节点的。它起作用了。即使我移动到页面的第页，它仍然可以工作

现在，如果我在Edge或IE11中尝试相同的东西，我会看到我认为合乎逻辑的东西，那就是JavaScript不能看到元素，如果元素在之前

我的问题是为什么我们有如此不同的行为，这不是规范的一部分吗？而bot的开关是代码工作的正确方式？

.getElementsByTagName以及.getElementsByName和.getElementsByClassName返回活动节点列表。这些集合将始终反映DOM的当前状态，因此即使在声明集合变量后添加或删除元素，也将获得最新的集合。这是因为每次访问引用live集合的变量时，都会重新扫描DOM。这可以为您提供最新的结果，但对性能来说不是很好。因此，如果您的文档动态变化不大，最好不要使用这些方法，而是使用.querySelectorAll，它返回一个静态节点列表。如果要查找具有id的单个元素，则返回一个静态节点列表。如果只查找与CSS选择器匹配的第一个元素，则返回一个静态节点列表。该静态节点列表在方法调用时建立其内容，并且即使以后发生DOM更改，也不会更新

现在，这里是重要的一部分，无论您使用什么方法来获取任何类型的节点列表，无论是活动的还是静态的，您都会得到一个列表对象，即使该列表是空的

---

您在不同浏览器中体验到的只是它们向您报告对象本身的方式的不同。但是，如果要访问对象的某些特定方面或对象的任何成员，所有浏览器都会给出相同的结果，并且如果在解析元素之前进行查询，则将有一个包含0项的节点列表。这就是为什么最好将需要访问DOM元素的脚本放在结束正文标记之前，因为到那时，所有HTML都已被解析，您肯定能够找到所有元素。

正如Felix Kling所发现的，我正在使用document.getElementsByTagName和returns live list。再加上我正在用console.log验证结果，在Chrome和Firefox中，当我单击expand按钮时会得到列表的值，因此我看到了我的元素。在IE和Edge中，控制台中打印的内容直接显示为实时列表的当前值，该列表当时没有任何元素

---

10倍于对每个人的快速反应：

标签的位置无关紧要，我对此表示怀疑。它对我有用：Related:@Nikola.grancharov:你是如何使用它的？getElementsByTagName返回一个活动列表，因此一旦该元素可用，它将更新自身。然而，我想IE也是如此。您可以在这里看到getElementsByTagName返回的列表是空的：如果您只向我们展示您正在使用的代码，这将简单得多。您是否实际使用console.log来验证该值？如果是，那么原因可能是Firefox和Chrome在您展开值时显示该值的当前内容。我不知道IE.Log的.length属性，相反，它在所有情况下都应该是0。