前端必知必会-JavaScript HTML DOM 集合

文章目录

• JavaScript HTML DOM 集合
• • HTMLCollection 对象
  • HTML HTMLCollection 长度
• 总结

JavaScript HTML DOM 集合

HTMLCollection 对象

getElementsByTagName() 方法返回 HTMLCollection 对象。

HTMLCollection 对象是 HTML 元素的数组式列表（集合）。

以下代码选择文档中的所有 <p> 元素：

示例

const myCollection = document.getElementsByTagName("p");

可以通过索引号访问集合中的元素。

要访问第二个 <p> 元素，您可以这样写：

myCollection[1]
注意：索引从 0 开始。

HTML HTMLCollection 长度

length 属性定义 HTMLCollection 中的元素数量：

示例

myCollection.length

当您想要循环遍历集合中的元素时，length 属性很有用：

示例
更改所有 <p> 元素的文本颜色：

const myCollection = document.getElementsByTagName("p");
for (let i = 0; i < myCollection.length; i++) {
myCollection[i].style.color = "red";
}

总结

本文介绍了JavaScript HTML DOM 集合的使用，如有问题欢迎私信和评论