如何使用 JavaScript 將 DOM NodeList 轉換為陣列？

在編寫高階 JavaScript 程式碼時，您可能會遇到需要將 DOM（文件物件模型）NodeList 轉換為更易於處理的資料結構（如陣列）的情況。儘管 NodeList 在任何程式語言中都類似於陣列。但是，它並不包含比陣列更多的特性。

您可以使用 Javascript 將 NodeList 轉換為陣列以更有效地工作。

示例 1

此示例提供將 NodeList 轉換為陣列的 JavaScript 程式碼。該程式碼使用 nodeListToArray 函式執行轉換。

演算法

步驟 1：在 JavaScript 中建立一個數組。該陣列必須為空，以便我們可以在後續步驟中將資料推入其中。

步驟 2：現在使用 push() 方法將 NodeList 中包含的值新增到陣列中。

步驟 3：將所有元素新增到陣列後，執行返回以處理陣列的返回值。

步驟 4：使用 queryselectorall() 方法測試所有元素是否已轉換為陣列。

步驟 5：在控制檯中檢查陣列，以測試元素是否位於正確的位置並已複製到陣列中。

示例

<!DOCTYPE html>
<html>
<head>
  <title>NodeList to Array</title>
</head>
<body>
 <h1> Heading 1</h1>
 <h1>Heading 2</h1>
  <script>
  
  document.addEventListener('DOMContentLoaded', function() {
  var nodeList = document.querySelectorAll('h1');
  var array = Array.from(nodeList);

  console.log(array);
});
</script>
</body>
</html>

示例 2

前面的示例是將 NodeList 轉換為陣列的最基本方法。在此示例中，我們將使用兩個 NodeList 將資料轉換為兩個陣列。第二個 Node 的轉換方法相同，只是您必須構建兩個 NodeList 和兩個陣列。此外，您必須執行兩次日誌函式。

演算法

步驟 1：在 JavaScript 中建立兩個陣列，並將陣列設定為為空，以便我們可以從 NodeList 中複製資料。

步驟 2：現在將 NodeList 1 的值新增到陣列 1 中，將 NodeList 2 的值新增到陣列 2 中。

步驟 3：將所有元素新增到陣列後，返回它們。

步驟 4：現在執行 queryselectorall() 方法兩次以測試兩個 NodeList 的元素是否已轉換。

步驟 5：執行程式碼以在控制檯中檢查陣列。現在您將在控制檯中獲得兩個陣列，顯示每個陣列的元素編號和元素。

示例

<!DOCTYPE html>
<html>
<head>
  <title>Convert DOM NodeList to Array</title>
</head>
<body>

<p>abc</p>
<p>abc</p>
<p>abc</p>
<p>abc</p>
<p>abc</p>
<p>abc</p>
<p>abc</p>
<p>abc</p>

 <h1> Heading 1</h1>
 <h1>Heading 2</h1>

  <script>
  
  document.addEventListener('DOMContentLoaded', function() {
  var nodeList1 = document.querySelectorAll('h1');
  var array1 = Array.from(nodeList1);
var nodeList2 = document.querySelectorAll('p');
  var array2 = Array.from(nodeList2);
  console.log(array1);
  console.log(array2);
});
</script>
</body>
</html>

結論

在處理 DOM 時，將 DOM NodeList 轉換為 JavaScript 中的陣列是一個常見的過程。我們可以透過使用簡單的演算法和程式碼輕鬆地執行此轉換。在本文中，我們將兩個 NodeList 轉換為兩個陣列。每個 NodeList 轉換不同型別的專案。類似地，您可以使用任意數量的 NodeList 和任何型別的資料。

生成的陣列提供更廣泛的陣列屬性集，使資料操作和處理變得更容易。儘管您還可以使用一些其他方法進行相同的轉換，例如 Array.from() 或擴充套件運算子。但是，本文討論的方法是最簡單的。

更新於： 2023年8月9日

561 次檢視

開啟您的 職業生涯

透過完成課程獲得認證

立即開始
廣告