如何從此 NodeList 中提取數據？

Question

我需要從NodeList提取特定的數據屬性。 一般來說，我從數組或對象獲取數據沒有問題，但是這個NodeList超出了我的范圍！ 即使我使用Array.from()將其轉換為數組，它也不起作用。

這是相關代碼：

這是它記錄的內容：

在第 173 行的日志中，封閉數組包含我需要的所有數據，但我根本不明白如何去那里。 當我嘗試轉到那里的索引時，它只會打開路徑坐標。

我還將代碼圖像添加為文本，但它沒有任何行：

let test = d3.selectAll(".unit")
    console.log(test)
    console.log(test._groups)
    console.log(test._groups[0])
    console.log(test._groups[0][0])

編輯：更具體地說，我需要的數據是節點列表（？）下方數組內的“數據”屬性，與第 173 行日志的前一個圖像進行比較：

EDIT2：更清楚一點：當我在控制台中打開節點列表時，我也會得到一個數組，而且只有我感興趣的數組。 我不明白這個數據結構，數組如何與節點列表相關，但我嘗試以各種方式訪問​​數組的索引，但沒有任何效果。

Answer 1

NodeList對象是節點的集合。 在某些情況下， NodeList是live ，這意味着 DOM 中的更改會自動更新集合。 在其他情況下， NodeList是static ，其中 DOM 中的任何更改都不會影響集合的內容。 例如， document.querySelectorAll()方法返回一個靜態NodeList 。

可以使用 for 循環遍歷 NodeList 中的項目：

for (let i = 0; i < myNodeList.length; i++) {
  let item = myNodeList[i];
}

for...of循環將正確循環 NodeList 對象：

const list = document.querySelectorAll('input[type=checkbox]');
for (let checkbox of list) {
  checkbox.checked = true;
}

您可以使用item()方法通過索引獲取項目。 例如，您可以通過以下方式獲取某個頁面上第一個<div> id ：

document.querySelectorAll("div").item(0).id

在您的情況下，您有一個數組，它包含一個NodeList類型的元素。 因此，當您執行test._groups[0]您將獲得數組的第一個元素，該元素是NodeList ，您需要像使用 NodeList 一樣使用它（見上文）！ 例如：

const arr = [1,2]; // simple array
// arr[0] is 1.
// in your case you have an array, but elements in that array are of type NodeList 
// (that's why console shows something like [NodeList(...)])

// when you get something from your array - it will be NodeList
// hence you can iterate over it or get some particular item like
test._groups[0].item(0).ariaAtomic

還有很多有用的方法。 查看文檔以獲取更多詳細信息。

Answer 2

要從 nodeList 中提取數據，您必須在其他選項卡中循環您的節點列表和股票 nodList 元素

var list = node.childNodes; 

// Using for..of 
for(var value of list.values()) { 
  console.log(value); 
}

[check this link https://developer.mozilla.org/en-US/docs/Web/API/NodeList/values][1]

Answer 3

NodeList 對象是節點的集合。

您可以使用NodeList.length屬性循環遍歷節點列表，並按如下方式讀取其 innerHTML。

並參考文檔以獲取更多知識

var items = document.getElementsByTagName("p");

var gross = "";
for (var i = 0; i < items.length; i++) {
   gross += items[i].innerHTML;
}

你也可以循環