HTMLCollection对象学习笔记
HTMLCollection是DOM树中一种常见的对象，表示某个上下文环境（通常是document对象）下所有符合特定选择器的元素组成的集合。在JS中，我们可以通过多种方式获取到一个HTMLCollection对象，并进行操作。
获取HTMLCollection对象
1. getElementBy系列方法
使用getElementById, getElementsByClassName, getElementsByTagName, getElementsByName等方法，可以获取满足相应条件的元素组成的HTMLCollection对象。
javascriptCopy Codeconst container = document.getElementById('container');
const paragraphs = container.getElementsByTagName('p');
2. children属性
使用children属性可以获取当前元素的子元素组成的HTMLCollection对象。
htmlCopy Code<div id="container">
<p>第一个段落</p>
<p>第二个段落</p>
<p>第三个段落</p>
</div>
javascriptCopy Codeconst container = document.getElementById('container');
const children = container.children;
3. querySelectorAll方法
使用querySelectorAll方法可以获取满足相应CSS选择器规则的元素组成的NodeList对象，需要将其转化为HTMLCollection对象才能进行操作。
htmlCopy Code<div id="container">
<p class="paragraph">第一个段落</p>
<p class="paragraph">第二个段落</p>
<p class="paragraph">第三个段落</p>
</div>
javascriptCopy Codeconst container = document.getElementById('container');
const paragraphs = container.querySelectorAll('.paragraph');
const paragraphsCollection = paragraphs.entries();
操作HTMLCollection对象
使用HTMLCollection对象的方法和属性，可以对其进行常规的操作，比如遍历、获取元素、判断是否存在等。
1. 遍历
可以使用for循环或forEach方法来进行遍历。
javascriptCopy Codefor (let i = 0; i < paragraphs.length; i++) {
console.log(paragraphs[i].innerText);
}
paragraphs.forEach((p) => {
console.log(p.innerText);
});
2. 获取元素
可以使用item方法或下标来获取指定位置的元素。
javascriptCopy Codeconst secondParagraph = paragraphs.item(1);
const thirdParagraph = paragraphs[2];
const lastParagraph = paragraphs.item(paragraphs.length - 1);
3. 判断是否存在
可以使用contains方法来判断某个元素是否存在于HTMLCollection中。
javascriptCopy Codeconsole.log(container.contains(secondParagraph)); // true
console.log(paragraphs.contains(container)); // false
实例
创建一个包含三个段落的HTML页面，并使用JS获取并操作其中的元素。
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTMLCollection对象学习笔记</title>
</head>
<body>
<div id="container">
<p class="paragraph">第一个段落</p>
<p class="paragraph">第二个段落</p>
<p class="paragraph">第三个段落</p>
</div>
<script>
const container = document.getElementById('container');
const paragraphs = container.querySelectorAll('.paragraph');
paragraphs.forEach((p) => {
console.log(p.innerText);
});
</script>
</body>
</html>
输出结果为
Copy Code第一个段落 第二个段落 第三个段落