极客教程JavaScript 如何循环遍历HTML元素而不使用forEach()循环
在这篇文章中，我们将学习如何在不使用forEach()方法的情况下循环遍历HTML元素。可以通过以下几种方式实现：
- 使用for循环：
- 使用while循环：
- 使用’for…..of’语句：
方法1：使用for循环
可以使用常规的JavaScript for循环来迭代HTML元素。可以使用length属性来找到需要迭代的元素数目。for循环由三部分组成：初始化、条件表达式和增量/减量表达式。可以使用方括号和相应的索引来访问每个元素。
语法：
for (let i = 0; i < elements.length; i++) {
console.log(elements[i]);
}
示例： 在这个示例中，我们将看到使用for循环的用法
<!DOCTYPE html>
<html lang="en">
<head>
<title>
How to loop through HTML elements without
using forEach() loop in JavaScript ?
</title>
</head>
<body>
<!-- HTML elements to iterate -->
<p>This is paragraph 1.</p>
<p>This is paragraph 2.</p>
<p>This is paragraph 3.</p>
<script type="text/javascript">
// Get the elements to be iterated
let htmlElements =
document.getElementsByTagName("p");
// Use a regular for-loop
for (let i = 0; i < htmlElements.length; i++) {
// Print the current element
console.log(htmlElements[i]);
}
</script>
</body>
</html>
输出：
<p>This is paragraph 1.</p>
<p>This is paragraph 2.</p>
<p>This is paragraph 3.</p>
方法2：使用while循环
可以使用JavaScript常规的while循环来迭代HTML元素。可以通过length属性找到元素的数量。通过在条件表达式中检查临时值来跟踪当前迭代。然后可以使用方括号和相应的索引访问每个项。
语法：
let i = 0;
while(i < elements.length) {
console.log(elements[i]);
i++;
}
示例： 在这个示例中，我们将看到使用while循环的用法
<!DOCTYPE html>
<html lang="en">
<head>
<title>
How to loop through HTML elements without using
forEach() loop in JavaScript ?
</title>
</head>
<body>
<!-- HTML elements to iterate -->
<p>This is paragraph 1.</p>
<p>This is paragraph 2.</p>
<p>This is paragraph 3.</p>
<script type="text/javascript">
// Get the elements to be iterated
let htmlElements =
document.getElementsByTagName("p");
// Define a variable to keep track
// of the current iteration
let i = 0;
// Check if the current value
// is lesser than total elements
while (i < htmlElements.length) {
// Print the current element
console.log(htmlElements[i]);
// Increment the value
i++;
}
</script>
</body>
</html>
输出：
<p>This is paragraph 1.</p>
<p>This is paragraph 2.</p>
<p>This is paragraph 3.</p>
方法3：使用‘for…..of’语句
for…of语句可以用来循环遍历可迭代对象的值。可迭代对象包括数组、映射、集合或HTML元素。一个临时变量在循环执行过程中保存当前值，然后可以在循环体中使用。
语法：
for (element of elements) {
console.log(element);
}
示例： 在这个示例中，我们将看到使用 ‘for…..of’ 语句的使用。
<!DOCTYPE html>
<html lang="en">
<head>
<title>
How to loop through HTML elements without using
forEach() loop in JavaScript ?
</title>
</head>
<body>
<!-- HTML elements to iterate -->
<p>This is paragraph 1.</p>
<p>This is paragraph 2.</p>
<p>This is paragraph 3.</p>
<script type="text/javascript">
// Get the elements to be iterated
let HTMLelements =
document.getElementsByTagName("p");
// Use the for...of statement to get
// the values
for (elem of HTMLelements) {
// Print the current element
console.log(elem);
}
</script>
</body>
</html>
输出：
<p>This is paragraph 1.</p>
<p>This is paragraph 2.</p>
<p>This is paragraph 3.</p>