在document.getElementsByTagName上使用索引值

Question

为什么常量声明的分号前的[0]起作用？const myHeading = document.getElementsByTagName("h1")[0];const myButton = document.getElementById("myButton");const myTextInput = document.getElementById("myTextInput");const myP = document.getElementById("myP");myButton.addEventListener("click", () => {  myHeading.style.color = myTextInput.value;});

Answer 1

为什么常量声明的分号前的[0]起作用？

记录的值document.getElementsByTagName("h1")。您可能会看到类似的内容

{

  "0": <h1> Here is a Header</h1>,

  "length": 1,

  "item": function item() { [native code] },

  "namedItem": function namedItem() { [native code] }

}

这显然是使用表示对象和现在迭代这个对象for..in，你会拿到钥匙0，length，item等，其中0代表DOM元素。为了访问对象属性，您可以使用方形符号[]并在其中传递键名称。如此["0"]。因此，基本上document.getElementsByTagName("h1")[0]是0从集合中访问具有键名的元素。因此document.getElementsByTagName("h1")[0]工作

const myHeading = document.getElementsByTagName("h1");

console.log(myHeading);

for (let keys in myHeading) {

  console.log(keys)

}

const myButton = document.getElementById("myButton");

const myTextInput = document.getElementById("myTextInput");

const myP = document.getElementById("myP");

myButton.addEventListener("click", () => {

  myHeading[0].style.color = myTextInput.value;

});

<h1> Here is a Header</h1>

<input type='text' id='myTextInput'>

<button type='button' id='myButton'>Click</button>

Answer 2

它返回一个类似数组的值（我相信是HTMLCollection），因此要使用数组表示法来访问第一个值[0]。如果您不想这样做，请querySelector改用：

const myHeading = document.querySelector("h1");

将[0]放置在调用之后的原因getElementsByTagName()是因为函数返回值时，您可以将其视为用返回值替换调用-因此，它在调用之后进行以获取第一个元素。如果愿意，可以这样看：

const headings = document.getElementsByTagName("h1");
const myHeading = headings[0];

Answer 3

它返回节点的集合。我们需要通过其索引访问它。