是什么导致我的简单 JavaScript for-in 循环没有为指定 HTML 元素的背景着色？

Question

我正在学习 JavaScript，遇到了一个我不明白的问题。我有一个用于测试的简单网页，在这里我尝试使用 for-in 循环将所有 h1 元素的背景颜色更改为红色，并将所有 h2 元素的背景颜色更改为蓝色。var h1 = document.getElementsByTagName("h1");var h2 = document.getElementsByTagName("h2");for (i in h1) {    h1[i].style.backgroundColor = "red";}for (i in h2) {    h2[i].style.backgroundColor = "blue";}当我运行此代码时，所有 h1 元素的背景都按预期变为红色。但是，h2 元素都没有改变。我在控制台中收到一条错误消息： TypeError: h1[i].style is undefined我不明白这一点，但是它引用的代码似乎运行得很好。如果我注释掉h1[i].style.backgroundColor = "red"; 并刷新页面，所有的 h2 元素都会变为蓝色。然后我在控制台中收到类似于第一个错误：TypeError: h2[i].style is undefined有谁知道发生了什么，为什么我的代码没有同时运行这两个循环？看起来它运行良好，直到第一个循环结束，然后出错并停止运行，因此不运行第二个循环。提前致谢！

Answer 1

那是因为当您使用for...in循环时，您正在遍历对象的所有属性。document.getElementsByTagName()返回 a HTMLCollection，其中包含匹配的 HTML 元素的数组和一个length属性（后者属于其原型）。

在第一个 for 循环中，您最终将尝试访问h1.length不是元素。因此，您将遇到阻止脚本进一步执行的错误。一个修复方法是在设置样式之前添加一个检查Object.hasOwnProperty(i)，确保我们只使用对象本身的属性而不是它的原型：

var h1 = document.getElementsByTagName("h1");

var h2 = document.getElementsByTagName("h2");

for (i in h1) {

  if (h1.hasOwnProperty(i))

    h1[i].style.backgroundColor = "red";

}

for (i in h2) {

  if (h1.hasOwnProperty(i))

    h2[i].style.backgroundColor = "blue";

}

<h1>h1 number 1</h1>

<h1>h1 number 2</h1>

<h1>h1 number 3</h1>

<h2>h2 number 1</h2>

<h2>h2 number 2</h2>

<h2>h2 number 3</h2>

或者，更好的方法是简单地使用 a返回forEach的NodeListdocument.querySelectorAll()。

var h1 = document.querySelectorAll("h1");

var h2 = document.querySelectorAll("h2");

h1.forEach(el => el.style.backgroundColor = 'red');

h2.forEach(el => el.style.backgroundColor = 'blue');

<h1>h1 number 1</h1>

<h1>h1 number 2</h1>

<h1>h1 number 3</h1>

<h2>h2 number 1</h2>

<h2>h2 number 2</h2>

<h2>h2 number 3</h2>

Answer 2

可能是您在 HTML 文档中创建 h1 和 h2 元素之前加载了 JavaScript 文件。在这种情况下，它会说这些元素还不存在，因此它们的样式无法更新。制作 h1 和 h2 元素后，尝试在 HTML 中移动脚本标记。