为什么 getElementsByTagName() 返回一个 html 集合，而 getElementsByTagName()[0] 返回未定义？

Question

我正在开发一个使用内容脚本的 chrome 扩展。我正在尝试获取页面的元素，但得到的结果是我从未遇到过的。这是我在运行页面加载后的代码。

var iframe = document.getElementsByTagName("iframe");
console.log(iframe);
console.log(iframe[0]);

第一条日志return是一个长度为1的HTML集合，第一个元素完全定义为iframe元素。

第二个日志return未定义。

我肯定遗漏了一些明显的东西，有人知道发生了什么吗？

我也试过 item(0)，结果为负。

我尝试过获取 ID、类和其他引用 DOM 元素的方法，它们都有效。但是类这里有同样的问题，它将 return 一个元素数组，但是如果我试图引用第一个元素，它总是未定义的。

Answer 1

问题是它是一个 Live HTMLCollection。所以它更新了！您在元素存在之前引用它。

<script>
  var iframe = document.getElementsByTagName("iframe");
  console.log("1", iframe);
  console.log("2", iframe[0]);
</script>
<iframe></iframe>
<script>
  console.log("3", iframe);
  console.log("4", iframe[0]);
  iframe[0].remove();
  console.log("5", iframe);
  console.log("6", iframe[0]);
</script>

为什么 getElementsByTagName() 返回一个 html 集合，而 getElementsByTagName()[0] 返回未定义？

Why is getElementsByTagName() returning an html collection, but getElementsByTagName()[0] returning undefined?

javascript

google-chrome

undefined

getelementsbytagname