是什么导致我的简单 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 元素的背景都按预期变为红色。然而，none 个 h2 元素完全改变了。

我在控制台中收到一条错误消息：TypeError: h1[i].style is undefined
不过我不明白这是代码它的引用似乎运行很好。

如果我注释掉h1[i].style.backgroundColor = "red"; 并刷新页面，所有的h2元素都变成了蓝色。

然后我在控制台中收到类似于第一个的错误：TypeError: h2[i].style is undefined

有人知道我的代码为什么没有运行这两个循环吗？看起来它运行在第一个循环结束之前都很好，然后出错并停止运行ning 所以不会运行第二个循环。

提前致谢！

Answer 1

那是因为当你使用一个for...in loop, you are looping through all properties of an object. document.getElementsByTagName() returns a HTMLCollection, which contains the array of matched HTML elements and a length property（后者属于它的原型）时。

在第一个 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>

或者，更好的方法是在 NodeList returned by document.querySelectorAll().

上简单地使用 forEach

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 中移动脚本标签。

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

What is causing my simple JavaScript for-in loops to not colour the background of the specified HTML elements?

javascript

dom

for-in-loop