极客教程HTMLCollection 遍历
在前端开发中，我们经常会遇到需要遍历 HTMLCollection 的情况。HTMLCollection 是一个类数组对象，它包含了文档中所有指定标签名的元素。在本文中，我们将详细介绍如何遍历 HTMLCollection，并提供多个示例代码帮助大家更好地理解。
获取 HTMLCollection
在开始遍历 HTMLCollection 之前，我们首先需要获取到它。我们可以通过多种方式来获取 HTMLCollection，比如使用 getElementsByTagName、getElementsByClassName、querySelectorAll 等方法。下面是一个简单的示例代码：
<!DOCTYPE html>
<html>
<head>
<title>HTMLCollection 遍历示例</title>
</head>
<body>
<div class="container">
<p>geek-docs.com</p>
<p>geek-docs.com</p>
<p>geek-docs.com</p>
</div>
<script>
const elements = document.getElementsByTagName('p');
console.log(elements);
</script>
</body>
</html>
Output:
在上面的示例中，我们使用 getElementsByTagName 方法获取了文档中所有的 <p> 元素，并将它们存储在 elements 变量中。
遍历 HTMLCollection
一旦我们获取到了 HTMLCollection，我们就可以开始遍历它了。HTMLCollection 是一个类数组对象，我们可以通过下标来访问其中的元素。下面是一个简单的示例代码，演示如何遍历 HTMLCollection：
<!DOCTYPE html>
<html>
<head>
<title>HTMLCollection 遍历示例</title>
</head>
<body>
<div class="container">
<p>geek-docs.com</p>
<p>geek-docs.com</p>
<p>geek-docs.com</p>
</div>
<script>
const elements = document.getElementsByTagName('p');
for (let i = 0; i < elements.length; i++) {
console.log(elements[i].textContent);
}
</script>
</body>
</html>
Output:
在上面的示例中，我们使用 for 循环遍历了获取到的 <p> 元素，并打印了它们的文本内容。
使用 forEach 遍历 HTMLCollection
除了使用传统的 for 循环来遍历 HTMLCollection，我们还可以使用 forEach 方法来简化操作。下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<title>HTMLCollection 遍历示例</title>
</head>
<body>
<div class="container">
<p>geek-docs.com</p>
<p>geek-docs.com</p>
<p>geek-docs.com</p>
</div>
<script>
const elements = document.getElementsByTagName('p');
Array.from(elements).forEach(element => {
console.log(element.textContent);
});
</script>
</body>
</html>
Output:
在上面的示例中，我们首先将 HTMLCollection 转换为数组，然后使用 forEach 方法遍历数组中的每个元素，并打印它们的文本内容。
使用 for…of 遍历 HTMLCollection
除了使用 forEach 方法，我们还可以使用 for...of 循环来遍历 HTMLCollection。下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<title>HTMLCollection 遍历示例</title>
</head>
<body>
<div class="container">
<p>geek-docs.com</p>
<p>geek-docs.com</p>
<p>geek-docs.com</p>
</div>
<script>
const elements = document.getElementsByTagName('p');
for (const element of elements) {
console.log(element.textContent);
}
</script>
</body>
</html>
Output:
在上面的示例中，我们使用 for...of 循环遍历了获取到的 <p> 元素，并打印了它们的文本内容。
使用 ES6 的 spread 运算符遍历 HTMLCollection
除了上述方法，我们还可以使用 ES6 的 spread 运算符来遍历 HTMLCollection。下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<title>HTMLCollection 遍历示例</title>
</head>
<body>
<div class="container">
<p>geek-docs.com</p>
<p>geek-docs.com</p>
<p>geek-docs.com</p>
</div>
<script>
const elements = document.getElementsByTagName('p');
[...elements].forEach(element => {
console.log(element.textContent);
});
</script>
</body>
</html>
Output:
在上面的示例中，我们使用 ES6 的 spread 运算符将 HTMLCollection 转换为数组，然后使用 forEach 方法遍历数组中的每个元素，并打印它们的文本内容。
使用 Array.prototype.map 遍历 HTMLCollection
除了上述方法，我们还可以使用 Array.prototype.map 方法来遍历 HTMLCollection。下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<title>HTMLCollection 遍历示例</title>
</head>
<body>
<div class="container">
<p>geek-docs.com</p>
<p>geek-docs.com</p>
<p>geek-docs.com</p>
</div>
<script>
const elements = document.getElementsByTagName('p');
Array.prototype.map.call(elements, element => {
console.log(element.textContent);
});
</script>
</body>
</html>
Output:
在上面的示例中，我们使用 Array.prototype.map 方法来遍历 HTMLCollection，并打印每个元素的文本内容。
使用 Array.from 遍历 HTMLCollection
除了上述方法，我们还可以使用 Array.from 方法来将 HTMLCollection 转换为数组，然后进行遍历。下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<title>HTMLCollection 遍历示例</title>
</head>
<body>
<div class="container">
<p>geek-docs.com</p>
<p>geek-docs.com</p>
<p>geek-docs.com</p>
</div>
<script>
const elements = document.getElementsByTagName('p');
Array.from(elements).forEach(element => {
console.log(element.textContent);
});
</script>
</body>
</html>
Output:
在上面的示例中，我们使用 Array.from 方法将 HTMLCollection 转换为数组，然后使用 forEach 方法遍历数组中的每个元素，并打印它们的文本内容。
使用 Array.prototype.forEach 遍历 HTMLCollection
除了上述方法，我们还可以使用 Array.prototype.forEach 方法来遍历 HTMLCollection。下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<title>HTMLCollection 遍历示例</title>
</head>
<body>
<div class="container">
<p>geek-docs.com</p>
<p>geek-docs.com</p>
<p>geek-docs.com</p>
</div>
<script>
const elements = document.getElementsByTagName('p');
Array.prototype.forEach.call(elements, element => {
console.log(element.textContent);
});
</script>
</body>
</html>
Output:
在上面的示例中，我们使用 Array.prototype.forEach 方法来遍历 HTMLCollection，并打印每个元素的文本内容。
使用 Array.prototype.reduce 遍历 HTMLCollection
除了上述方法，我们还可以使用 Array.prototype.reduce 方法来遍历 HTMLCollection。下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<title>HTMLCollection 遍历示例</title>
</head>
<body>
<div class="container">
<p>geek-docs.com</p>
<p>geek-docs.com</p>
<p>geek-docs.com</p>
</div>
<script>
const elements = document.getElementsByTagName('p');
const textContentArray = Array.prototype.reduce.call(elements, (acc, element) => {
acc.push(element.textContent);
return acc;
}, []);
console.log(textContentArray);
</script>
</body>
</html>
Output:
在上面的示例中，我们使用 Array.prototype.reduce 方法来遍历 HTMLCollection，并将每个元素的文本内容存储在一个数组中。
使用 Array.prototype.filter 遍历 HTMLCollection
除了上述方法，我们还可以使用 Array.prototype.filter 方法来遍历 HTMLCollection。下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<title>HTMLCollection 遍历示例</title>
</head>
<body>
<div class="container">
<p>geek-docs.com</p>
<p>geek-docs.com</p>
<p>geek-docs.com</p>
</div>
<script>
const elements = document.getElementsByTagName('p');
const filteredElements = Array.prototype.filter.call(elements, element => {
return element.textContent.includes('geek-docs.com');
});
console.log(filteredElements);
</script>
</body>
</html>
Output:
在上面的示例中，我们使用 Array.prototype.filter 方法来遍历 HTMLCollection，并过滤出包含特定文本的元素。
通过以上示例代码，我们详细介绍了如何遍历 HTMLCollection，并提供了多种方法来实现遍历操作。