Question

为什么如果我在文档中只有一个h1元素，我仍然需要使用索引来访问它？

如下所示不起作用。

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

但如果我这样做

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

确实有效。

即使我只有一个h1，为什么我必须指定？

Answer 1

简短回答：这样你就可以有一些理智。

如果您不知道是否会获得单个元素或元素集合，则必须编写这样的防御性类型检查（愚蠢）代码

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

让函数更有意义的是总是返回一个已知类型HTMLCollection HTMLElement个对象

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

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

这很好，因为赋值清楚地表明它期望一个数组（或类数组）的元素，但只关心为第一个值分配一个标识符

您还应该了解较新的document.querySelector和document.querySelectorAll功能......

document.querySelector会从文档中选择最多一个元素，或者返回null
document.querySelectorAll将始终返回HTMLCollection，但如果没有元素与选择器匹配，则可能为空。

以下是我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 2

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

Answer 3

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

Answer 4

关键是getElementsByTagName总是返回HTMLCollection个元素，这些元素主要用作数组。如果此集合中只有一个元素，则其索引为0。

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

点击here或here查看有关此内容的更多文档。

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

4 个答案: