为什么 getElementsByTagName() 总是 returns 数组？

Question

为什么我的文档中只有一个h1元素，还是要用索引来访问呢？

像下面这样是不行的。

document.getElementsByTagName('h1').innerHTML = "SHUSHAN";

但如果我这样做

document.getElementsByTagName('h1')[0].innerHTML = "SHUSHAN";

确实有效。

虽然我只有一个h1，为什么一定要指定？

Answer 1

getElementsByTagName - 方法名称本身暗示它将 return 多个元素 - 即数组。该方法总是 returns 一个数组，长度等于匹配元素的数量。因此，您必须始终通过数组中元素的索引访问元素。

Answer 2

简短回答：这是为了让您保持理智。

如果您不知道您将获得单个元素还是元素集合，则必须编写这样的防御性 type-checking（愚蠢）代码

let foo = document.getElementsByTagName('h1')
if (foo instanceof HTMLCollection)
  // do something with all elements
else
  // do something with just one element

函数始终 return 一个已知类型，HTMLCollection 个 HTMLElement 个对象

更有意义

如果只关心获取第一个元素，可以使用解构赋值

let [first] = document.getElementsByTagName('h1')
console.log(first) // outputs just the first h1

这很好，因为赋值清楚地表明它需要一个元素数组（或 array-like），但只关心为第一个值分配标识符

您还应该了解更新的 document.querySelector and document.querySelectorAll 函数……

document.querySelector 最多 select 一个文档中的元素或 returnnull
document.querySelectorAll 将始终 return 和 HTMLCollection，但如果没有元素与 select 或
匹配，则可能为空

这是我在 2017 年编写您的代码的方式

setTimeout($ => {
  // get the element to change
  let elem = document.querySelector('h1')
  // update the text of the element
  elem.textContent = 'SHUSHAN'
}, 3000)

<h1>wait 3 seconds ...</h1>

Answer 3

数组必须通过索引访问，无论它有多少个值。阅读一些关于数组数据类型的文章，以更好地理解这个概念。

Answer 4

重点是 getElementsByTagName 总是 returns 一个 HTMLCollection 元素，主要用作数组。如果这个集合中只有一个元素，那么它的索引就是0。

这就是您必须指定索引的原因，即使文档中只有一个元素。

单击 here or here 以查看有关此内容的更多文档。

为什么 getElementsByTagName() 总是 returns 数组？

Why do getElementsByTagName() always returns an array?

javascript

dom

getelementsbytagname