为什么我跑的时候:
document.getElementsByTagName('p')[0].innerText;
从控制台返回第一个p元素的内部文本(正确地作为p元素的内部文本),但是当我通过浏览器的脚本文件运行它时,控制台将其记录为'未定义'?
这里是我从内部.js文件运行的代码:
console.log('test', document.getElementsByTagName('p').innerText);
这是控制台输出:test undefined
答案 0 :(得分:3)
.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
代替。