Javascript 为什么getElementsByTagName（）总是返回数组？

为什么如果文档中只有一个

h1

元素，我仍然必须使用索引来访问它

像下面这样是行不通的

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

但如果我这样做了

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

它确实有效

---

即使我只有一个

h1

，为什么我必须指定？

getElementsByTagName—方法名本身意味着它将返回多个元素—即一个数组。该方法始终返回一个数组，其长度等于匹配元素的数量。因此，您必须始终通过数组中元素的索引来访问元素。

简短回答：这是为了让您保持清醒

如果您不知道是得到一个元素还是一个元素集合，那么就必须编写这样的防御性类型检查（愚蠢）代码

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

函数总是返回一个已知类型，即

HTMLElement

对象的

HTMLCollection

，这样做更有意义

---

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

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

这很好，因为赋值清楚地表明它需要一个数组（或类似数组的）元素，但只关心将标识符赋值给第一个值

---

您还应该了解更新的和功能

• document.querySelector

  将从文档中最多选择一个元素或返回

  null

• document.querySelectorAll

  将始终返回

  HTMLCollection

  ，但如果没有与选择器匹配的元素，则可能为空

---

下面是我在2017年如何编写您的代码

setTimeout（$=>{
//获取要更改的元素
设elem=document.querySelector（'h1'）
//更新元素的文本
elem.textContent='SHUSHAN'
}，3000）

---

等待3秒…

索引必须访问数组，无论它包含多少值。阅读数组数据类型以更好地理解这个概念。

重点是

getElementsByTagName

总是返回元素的

HTMLCollection

，它主要作为数组工作。如果此集合中只有一个元素，则其索引为

0

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

---

单击或查看有关此操作的更多文档。

因为返回类型是数组。想想看，如果这个函数有时返回一个en元素，有时返回一个元素数组，那会有多痛苦，那太疯狂了。你能告诉我setTimeout的$=>{…}是什么意思吗？它只是一个匿名函数。它可以重写为

function（）{…}