循环的 HTMLCollection

不建议使用 for/in 循环来循环 HTMLCollection，因为这种类型的循环用于迭代对象的属性。 HTMLCollection 包含可能与所需元素一起返回的其他属性。

有 3 种方法可用于正确循环 HTMLCollection。

• 方法一：使用 for/of 循环： for/of 循环用于循环遍历可迭代对象的值。这包括数组、字符串、节点列表和 HTMLCollections。

  此循环的语法类似于 for/in 循环。该对象必须是可迭代的才能与此循环一起使用。

  句法：

  for (item of iterable) {
    // code to be executed
  }
  

  例子：

    
  
      For loop for HTMLCollection elements
  
    
  
      GeeksforGeeks
      For loop for HTMLCollection elements
      This is paragraph 1.
      This is paragraph 2.
      
          // get a HTMLCollection of elements in the page
          let collection = document.getElementsByTagName("p");
    
          // regular for loop
          for (let i = 0; i < collection.length; i++) {
              console.log(collection[i]);
          }
      
  
    

  控制台输出：
  

• 方法二：使用 Array.from() 方法将 HTMLCollection 转换为 Array
  Array.from() 方法用于从类数组或可迭代对象创建一个新数组。 HTMLCollection 被传递给此方法以将其转换为数组。

  forEach() 方法现在可用于像数组一样遍历元素并显示它们。

  句法：

  Array.from(collection).forEach(function (element) {
          console.log(element)
        });
  

  例子：

    
  
      For loop for HTMLCollection elements
  
    
  
      GeeksforGeeks
      For loop for HTMLCollection elements
      This is paragraph 1.
      This is paragraph 2.
      
          // get a HTMLCollection of elements in the page
          let collection = document.getElementsByTagName("p");
    
          // convert to an array using Array.from()
          Array.from(collection).forEach(function(element) {
              console.log(element)
          });
      
  
    

  输出：
  

• 方法3：使用正常的for循环
  可以使用普通的 for 循环遍历元素。 HTMLCollection 中元素的数量可以通过使用集合的长度属性来确定。然后将 for 循环运行到元素的数量。

  每个项目都可以通过使用方括号及其各自的索引来访问。

  句法：

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

  例子：

    
  
      For loop for HTMLCollection elements
  
    
  
      GeeksforGeeks
      For loop for HTMLCollection elements
      This is paragraph 1.
      This is paragraph 2.
      
          // get a HTMLCollection of elements in the page
          let collection = document.getElementsByTagName("p");
    
      // using for loop
          for (let i = 0; i < collection.length; i++) {
      console.log(collection[i]);
          });
      
  
    

  输出：