gpt4 book ai didi

javascript - HTML页面添加JS,浏览器差异

转载 作者:行者123 更新时间:2023-12-03 02:00:39 26 4
gpt4 key购买 nike

我有一个简单的页面,需要非常小的 JS 功能。当我使用<script>时标签,我在不同的浏览器上得到不同的行为,具体取决于 <script> 的位置标签已放置。

Chrome(65) 和 Firefox(59) 上 <script> 的位置标签无关紧要,代码在页面呈现之前执行。假设我有 <h1>在它之前我有 <script>使用<h1> DOM 节点。有用。即使我移动<script><head>页面,它仍然有效。

现在,如果我在 EdgeIE11 中尝试同样的事情,我会看到我认为合乎逻辑的事情,那就是 JavaScript 无法看到该元素,如果<script><h1> 之前.

我的问题是为什么我们有如此不同的行为,这不是规范的一部分吗?机器人的女巫是代码应该工作的正确方式吗?

最佳答案

.getElementsByTagName() (与 .getElementsByName().getElementsByClassName() 一起)返回“事件”节点列表。这些集合将始终反射(reflect) DOM 的当前状态,因此即使在声明集合变量后添加或删除元素,您也将获得最新的集合。它之所以有效,是因为每次访问引用“实时”集合的变量时,都会重新扫描 DOM。这对于为您提供最新结果非常有用,但对于性能而言却不太好。因此,如果您的文档动态变化不大,您最好不要使用这些方法,而是使用 .querySelectorAll() ,它返回一个静态节点列表(其内容在方法调用时建立,即使稍后发生 DOM 更改也不会更新)或简单地 .getElementById()如果您正在寻找具有 id 的单个元素或.querySelector()如果您只查找与 CSS 选择器匹配的第一个元素。

现在,这是重要的部分,无论您使用什么方法来获取任何类型的节点列表(实时或静态),您总是会得到一个列表对象,即使该列表是空的。

您在不同浏览器中遇到的情况只是它们向您报告对象本身的方式不同。但是,如果您要访问对象的某些特定方面或对象的任何成员,所有浏览器都会给您相同的结果,并且如果您在解析元素之前进行查询,您将获得一个节点列表,其中包含其中有 0 项。这就是为什么最佳实践是将需要访问 DOM 元素的脚本放在结束 body 之前。标签( </body> ),因为到那时,所有的 HTML 都已被解析,你一定能够找到所有元素。

关于javascript - HTML页面添加JS,浏览器差异,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50052706/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com