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

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

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

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

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

Answer 2

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

Answer 3

为什么在常量声明的分号前加[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等，其中{{1} }代表dom元素。为了访问对象属性，您可以使用方形符号0并在其中传递键名称。 []这样。因此，基本上["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;
});

在document.getElementsByTagName上使用索引值

3 个答案: