在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")。您可能会看到类似的内容{&nbsp; "0": <h1> Here is a Header</h1>,&nbsp; "length": 1,&nbsp; "item": function item() { [native code] },&nbsp; "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) {&nbsp; console.log(keys)}const myButton = document.getElementById("myButton");const myTextInput = document.getElementById("myTextInput");const myP = document.getElementById("myP");myButton.addEventListener("click", () => {&nbsp; 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&nbsp;myHeading&nbsp;=&nbsp;document.querySelector("h1");将[0]放置在调用之后的原因getElementsByTagName()是因为函数返回值时，您可以将其视为用返回值替换调用-因此，它在调用之后进行以获取第一个元素。如果愿意，可以这样看：const&nbsp;headings&nbsp;=&nbsp;document.getElementsByTagName("h1"); const&nbsp;myHeading&nbsp;=&nbsp;headings[0];

Answer 3

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