当从控制台运行document.getElementsByTagName与脚本文件相比时,为什么会出现冲突结果?

时间:2018-06-13 20:23:49

标签: javascript

为什么我跑的时候:

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

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

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

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

这是控制台输出:test undefined

1 个答案:

答案 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 代替。