如何使用 JavaScript 将 DOM 节点列表转换为数组？

NodeList 对象是节点的集合，通常由Node.childNodes等属性和document.querySelectorAll()等方法返回。尽管 NodeList 不是实际的数组，但可以在forEach()方法的帮助下对其进行迭代。 NodeList 也可以通过以下方法转换为实际数组。

方法一：通过使用Array.prototype.slice.call()方法。

• 句法：

  const array = Array.prototype.slice.call(nodeList);

• 例子：

    
  
      
      
      Document
  
    
  
      Hello geeks 1
      Hello geeks 2
      Hello geeks 3
      Hello geeks 4
    
      
    
          // This is nodeList
          const nodeList = document.querySelectorAll('p');
          console.log(nodeList);
    
          // Converting using Array.prototype.slice.call
          const array1 = Array.prototype.slice.call(nodeList);
          console.log(array1);
      
  
    

• 输出：

方法二：借助Array.from() 方法。

• 句法：

  const array = Array.from(nodeList);

• 例子：

    
  
      
      
      Document
  
    
  
      Hello geeks 1
      Hello geeks 2
      Hello geeks 3
      Hello geeks 4
    
      
    
          // This is nodeList
          const nodeList = document.querySelectorAll('p');
          console.log(nodeList);
    
          // Converting to array using Array.from() method
          const array = Array.from(nodeList);
          console.log(array);
      
  
    

• 输出：

方法 3：使用 ES6 扩展语法，它允许在需要零个或多个参数或元素的地方扩展诸如数组表达式或字符串之类的可迭代对象。

• 句法：

  const array = [ ...nodeList ]

• 例子：

    
  
      
      
      Document
  
    
  
      Hello geeks 1
      Hello geeks 2
      Hello geeks 3
      Hello geeks 4
    
      
    
          // This is nodeList
          const nodeList = document.querySelectorAll('p');
          console.log(nodeList);
    
          // Converting using Spread syntax
          const array1 = [...nodeList];
          console.log(array1);
      
  
    

• 输出：

注意：方法 2 和方法 3 在旧浏览器中可能无法正常工作，但在所有现代浏览器中都可以正常工作。