我有一个简单的页面需要非常小的JS功能。当我使用<script>代码时，我会在不同的浏览器上获得不同的行为，具体取决于放置<script>代码的位置。
在 Chrome （65）和 Firefox （59）上<script>标记的位置无关紧要，代码在页面呈现之前执行。假设我有<h1>，之前我<script>使用<h1> DOM节点。有用。即使我将<script>移动到页面的<head>，它仍然有效。
现在，如果我在 Edge 或 IE11 中尝试相同的操作，我会看到我认为合乎逻辑的事情，那就是JavaScript无法看到该元素<script>位于<h1>之前。
我的问题是为什么我们有这样不同的行为，这不是规范的一部分吗？机器人的女巫是代码应该运行的正确方法吗？
答案 0 :(得分：1)
.getElementsByTagName()（以及.getElementsByName()和.getElementsByClassName()）返回＆＃34;直播＆＃34;节点列表。这些集合将始终反映DOM的当前状态，因此即使在您声明了集合变量之后添加或删除了元素，您也将获得最新的集合。它的工作原理是因为每次访问引用＆＃34; live＆＃34;的变量时集合，DOM被重新扫描。这可以很好地为您提供最新的结果，但对性能不是很好。因此，如果您的文档没有很大的动态变化，最好不要使用这些方法，而是使用.querySelectorAll()，它会返回一个静态节点列表（一个人的内容是在方法调用的时间，即使稍后更改DOM也不会更新）或者如果您正在寻找具有.getElementById()或id的单个元素，则只需.querySelector()与CSS选择器匹配的第一个元素。
现在，这里是重要的部分，无论您使用何种方法获取任何类型的节点列表（实时或静态），您始终都会获得一个列表对象返回，即使该列表为空。
您在浏览器中遇到的问题只是他们向您报告对象本身的方式不同。但是，如果您要访问对象的某些特定方面或对象的任何成员，则所有浏览器都会给您相同的结果，如果您在要解析的元素之前进行查询，那么您将拥有一个节点列表，其中0项。这就是为什么在关闭body标记（</body>）之前放置需要访问DOM元素的脚本的最佳做法，因为到那时，所有HTML都已被解析你一定能找到所有元素。
答案 1 :(得分：0)
正如Felix Kling发现的那样，我正在使用document.getElementsByTagName（）和返回实时列表。结合我使用console.log（）验证结果的事实，当我点击展开按钮时Chrome和Firefox获取列表的值，因此我看到了我的元素。在IE和Edge中，控制台中打印的内容直接显示实时列表的当前值，当时没有元素。
对于每个人的快速反应，大约10倍：）