如何从此 NodeList 中提取数据？

Question

I need to extract a particular data property from a NodeList . I have no problems getting data from arrays or objects in general, but this NodeList is beyond me! It doesn't work even if I use Array.from() to turn it into an array.

This is the relevant code:

And this is what it logs:

In the log on line 173, the closed arrays contain all the data I need, but I simply don't understand how to go there. When I try to go to an index there it just opens up the path coordinates.

I will also add the code image as text, it doesn't have any lines though:

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

EDIT: To be more specific, the data I need is a " data " property inside the array below the nodelist (?), compare to the previous image of the log on line 173:

EDIT2: To be even more clear: When I open the nodelist in the console, I also get an array, and it is only the array that interests me. I don't understand this data structure, how the array is related to the nodelist, but I have tried to access the indexes of the array in a variety of ways and nothing has worked.

Answer 1

NodeList objects are collections of nodes. In some cases, the NodeList is live , which means that changes in the DOM automatically update the collection. In other cases, the NodeList is static , where any changes in the DOM does not affect the content of the collection. The document.querySelectorAll() method returns a static NodeList , for instance.

It's possible to loop over the items in a NodeList using a for loop:

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

for...of loops will loop over NodeList objects correctly:

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

You can use item() method to get an item by its index. For instance, this is how you can get id of the first <div> on some page:

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

In your case, you have an array and it contains an element of type NodeList . So, when you do test._groups[0] you get the first element of your array and this element is NodeList and you need to work with it as with NodeList (see above)! For instance:

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

There are a lot more useful methods. Check docs for more details.

Answer 2

To extrat data from nodeList you must loop your node list and the stock nodList elemnts in otheer tab

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 objects are collections of nodes.

You can loop through a node list by using the NodeList.length property and read the innerHTML of it as follows.

And refer the document for more knowlege

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

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

and also you can loop through the