Как мне извлечь данные из этого списка узлов?

#javascript #nodelist

#javascript #список узлов

Вопрос:

Мне нужно извлечь определенное свойство данных из 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])
  

РЕДАКТИРОВАТЬ: чтобы быть более конкретным, данные, которые мне нужны, — это свойство «data» внутри массива под списком узлов (?), Сравните с предыдущим изображением журнала в строке 173:
введите описание изображения здесь

РЕДАКТИРОВАНИЕ 2: чтобы быть еще более понятным: когда я открываю список узлов в консоли, я также получаю массив, и меня интересует только массив. Я не понимаю эту структуру данных, как массив связан со списком узлов, но я пытался получить доступ к индексам массива различными способами, и ничего не сработало.

Комментарии:

1. Какие именно данные вам нужны? В последней строке показан элемент path, который содержит массивы.

2. Я отредактировал сообщение и добавил более конкретное изображение внизу. Сейчас я проверю ответы ниже, чтобы узнать, поможет ли это мне.

3. Это свойства элемента test._groups[0][0] , которые содержат эти данные. Например. console.log(test._groups[0][2].ariaAtomic) печатает первое свойство, показанное на скриншоте.

4. Нет, test._groups[0][0] — это именно то, что я пробовал выше, и он выводит только путь с координатами. test._groups[0][2].ariaAtomic выдает ошибку «Ожидал назначения или вызова функции, а вместо этого увидел выражение».

Ответ №1:

NodeList объекты представляют собой наборы узлов. В некоторых случаях NodeList он активен, что означает, что изменения в DOM автоматически обновляют коллекцию. В других случаях NodeList является статическим, когда любые изменения в DOM не влияют на содержимое коллекции. document.querySelectorAll() NodeList Например, метод возвращает статическое значение.

Можно перебирать элементы в списке узлов, используя цикл for:

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

for...of циклы будут правильно перебирать объекты списка узлов:

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

Вы можете использовать метод item(), чтобы получить элемент по его индексу. Например, вот как вы можете получить id первое <div> на какой-либо странице:

 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
  

Есть гораздо более полезные методы. Более подробную информацию см. в документах.

Комментарии:

1. Спасибо, но в моем случае это не работает, см. Правки в моем исходном сообщении.

Ответ №2:

Чтобы извлечь данные из списка узлов, вы должны зациклить свой список узлов и стандартные элементы списка узлов на другой вкладке

 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]

  

Комментарии:

1. В моем случае это не работает, см. Правки в моем исходном сообщении.

Ответ №3:

Объекты списка узлов представляют собой наборы узлов.

Вы можете перебирать список узлов с помощью свойства NodeList.length и читать его innerHTML следующим образом.

И обратитесь к документу для получения дополнительных знаний

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

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

а также вы можете перебирать

Комментарии:

1. Это не обычный список узлов, и приведенный выше пример, похоже, не работает … см. Правки в моем первоначальном сообщении.