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

我正在学习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]。样式未定义
但我不理解这一点，因为它引用的代码似乎运行得很好

如果我注释掉

h1[I].style.backgroundColor=“red”
然后刷新页面，所有的h2元素都变为蓝色

然后，我在控制台中得到一个与第一个类似的错误：TypeError:h2[I]。样式未定义

有人知道发生了什么吗？为什么我的代码没有同时运行这两个循环？在第一个循环结束之前，它看起来运行良好，然后出错并停止运行，因此不运行第二个循环

提前谢谢
 这是因为当您使用时，您正在遍历对象的所有属性。返回一个
HTMLCollection
，其中包含匹配的HTML元素数组（后者属于其原型）

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


var h1=document.getElementsByTagName（“h1”）；
var h2=document.getElementsByTagName（“h2”）；
用于（h1中的i）{
if（h1.自有财产（i））
h1[i].style.backgroundColor=“红色”；
}
对于（h2中的i）{
if（h1.自有财产（i））
h2[i].style.backgroundColor=“蓝色”；
}
h1编号1
h1 2号
H13号
氢1号
氢气2号
h2编号3可能是在HTML文档中创建h1和h2元素之前加载了JavaScript文件。在这种情况下，可能会说这些元素还不存在，因此它们的样式无法更新。制作h1和h2元素后，尝试在HTML中移动脚本标记。
不幸的是，情况并非如此。这是因为，
for…in
循环遍历对象的所有属性，包括来自其原型的属性。在这种情况下，您将遇到试图访问不存在的
h1.length.style.backgroundColor
。好的，我知道了，谢谢您让我知道！：）可以确认脚本位于正文底部，但感谢您的建议！