gpt4 book ai didi

javascript - 当从控制台与脚本文件运行 document.getElementsByTagName 时,为什么我会得到相互冲突的结果?

转载 作者:行者123 更新时间:2023-11-28 17:29:13 24 4
gpt4 key购买 nike

为什么当我运行时:

document.getElementsByTagName('p')[0].innerText;

从控制台返回第一个 p 元素的内部文本(正确地作为 p 元素的内部文本),但是当我通过浏览器中的脚本文件运行它时,控制台将其记录为“未定义”?

这是我从内部 .js 文件运行的代码:

console.log('test', document.getElementsByTagName('p').innerText);

这是控制台输出:测试未定义

最佳答案

.getElementsByTagName() 返回节点列表。以下内容:

document.getElementsByTagName('p').innerText

尝试获取该节点列表的.innerText,但节点列表没有.innerText,只有单个节点有。您必须访问列表中的节点之一,然后才能获取其 .innerText,如下所示:

document.getElementsByTagName('p')[0].innerText
<小时/>

此外,当您打开控制台并在其中输入内容时,文档已被完全解析。您进行相同的测试,但在解析 p 元素之前尝试使用文件中的代码。

确保您的 script 标记位于文档中结束 body 标记之前,以便在遇到它时,所有 HTML 都将被解析为内存。

示例:

<!doctype html>
<html>
<head>
<title>Attempting to get DOM references too early</title>

<script>
// This will fail because, at this point, the <p> hasn't been parsed yet
console.log(document.querySelector("p").textContent);
</script>

</head>
<body>
<p>Test</p>
</body>
</html>

<!doctype html>
<html>
<head>
<title>Getting DOM references after the DOM is ready</title>
</head>
<body>
<p>Test</p>

<script>
// This will work because, at this point, the <p> has been parsed
console.log(document.querySelector("p").textContent);
</script>

</body>
</html>

仅供引用:

  • .getElementsByTagName() 返回一个“事件”节点列表,该列表可能会影响页面性能,因为每次变量访问时,必须再次搜索整个文档以确保您拥有最新的收藏。这在很多情况下是不合适的用例(特别是如果您的文档不是动态的添加/删除元素)。所以,大多数情况下,使用<强> .querySelectorAll() 相反,因为此方法返回一个“静态”节点列表。
  • .innerText 是一个“事实上的”标准,但它的工作方式与.textContent,这是一个实际的标准。使用.textContent 相反。

关于javascript - 当从控制台与脚本文件运行 document.getElementsByTagName 时,为什么我会得到相互冲突的结果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50845691/

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