如何在不使用 JavaScript 中的 forEach() 循环的情况下遍历 HTML 元素？

在本文中，我们将学习如何在不使用 forEach() 方法的情况下遍历 HTML 元素。

方法 1：使用for循环：可以使用常规 JavaScript for循环来迭代 HTML 元素。可以使用 length属性找到要迭代的元素数。 for 循环由三部分组成，初始化、条件表达式和递增/递减表达式。每个项目都可以通过使用带有各自索引的方括号来访问。

句法：

for (let i = 0; i < elements.length; i++) {
    console.log(elements[i]);
}

例子：

HTML

  

  
    
    This is paragraph 1.
    This is paragraph 2.
    This is paragraph 3.
  
    
      
        // 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]);
        }
    

  

输出：

方法 2：使用 While 循环：可以使用常规 JavaScript while 循环来迭代 HTML 元素。可以使用长度属性找到元素的数量。临时值用于通过在条件表达式中检查当前迭代来跟踪当前迭代。然后可以通过使用带有各自索引的方括号来访问每个项目。

句法：

let i = 0;
while(i < elements.length) {
    console.log(elements[i]);
    i++;
}

例子：

HTML

  

  
    
    This is paragraph 1.
    This is paragraph 2.
    This is paragraph 3.
  
    
      
        // 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++;
        }
    

  

输出：

方法 3：使用 ‘for…..of’ 语句： for…of 语句可用于循环遍历可迭代对象的值。它包括像 Array、Map、Set 或 HTML 元素这样的对象。一个临时变量在循环执行期间保存当前值，然后可以在循环体中使用。

句法：

for (element of elements) {
    console.log(element);
}

例子：

HTML

  

  
    
    This is paragraph 1.
    This is paragraph 2.
    This is paragraph 3.
  
    
      
        // 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);
        }
    

  

输出：