Получать нулевые значения, когда я пытаюсь получить доступ к дочернему узлу в javascript
Недавно я просто пытаюсь получить доступ к дочерним узлам, используя свойство childNodes в javascript, но когда я пытаюсь получить один из его узлов, я получаю в консоли значение null. Это мой код:
var children=document.getElementById("viewer").childNodes;
console.info(children); // I get a NodeList[]
console.info(children[0]); //I get undefined value
console.info(children.item(0)); //I get a null value
Я провел последние два дня в Интернете для решения этой проблемы, но не могу найти решения.
Это я получил из console.info (children);
NodeList(9)
0:div#pageContainer1.page
1:div#pageContainer2.page
2:div#pageContainer3.page
3:div#pageContainer4.page
4:div#pageContainer5.page
5:div#pageContainer6.page
6:div#pageContainer7.page
7:div#pageContainer8.page
8:div#pageContainer9.page
length:9
__proto__:NodeList
Это код div:
<div id = "viewer" class = "pdfViewer" document-pages = "9">
<div style = "width: 791.776px; height: 1119.75px;" class = "page" data-loaded = "true" id = "pageContainer1" data-page-number = "1">
<div class = "canvasWrapper" style = "width: 791.776px; height: 1119.75px;">
<canvas id = "page1" width = "792" height = "1120" style = "width: 792px; height: 1120px;"></canvas>
</div>
</div>
<div style = "visibility: hidden;" class = "page" data-loaded = "false" id = "pageContainer2" data-page-number = "2">
<div class = "canvasWrapper">
<canvas id = "page2"></canvas>
</div>
<svg class = "annotationLayer"></svg>
<div class = "textLayer"></div>
</div>
<div style = "visibility: hidden;" class = "page" data-loaded = "false" id = "pageContainer3" data-page-number = "3">
<div class = "canvasWrapper">
<canvas id = "page3"></canvas>
</div>
<svg class = "annotationLayer"></svg>
<div class = "textLayer"></div>
</div>
<div style = "visibility: hidden;" class = "page" data-loaded = "false" id = "pageContainer4" data-page-number = "4">
<div class = "canvasWrapper">
<canvas id = "page4"></canvas>
</div>
<svg class = "annotationLayer"></svg>
<div class = "textLayer"></div>
</div>
<div style = "visibility: hidden;" class = "page" data-loaded = "false" id = "pageContainer5" data-page-number = "5">
<div class = "canvasWrapper">
<canvas id = "page5"></canvas>
</div>
<svg class = "annotationLayer"></svg>
<div class = "textLayer"></div>
</div>
<div style = "visibility: hidden;" class = "page" data-loaded = "false" id = "pageContainer6" data-page-number = "6">
<div class = "canvasWrapper">
<canvas id = "page6"></canvas>
</div>
<svg class = "annotationLayer"></svg>
<div class = "textLayer"></div>
</div>
<div style = "visibility: hidden;" class = "page" data-loaded = "false" id = "pageContainer7" data-page-number = "7">
<div class = "canvasWrapper">
<canvas id = "page7"></canvas>
</div>
<svg class = "annotationLayer"></svg>
<div class = "textLayer"></div>
</div>
<div style = "visibility: hidden;" class = "page" data-loaded = "false" id = "pageContainer8" data-page-number = "8">
<div class = "canvasWrapper">
<canvas id = "page8"></canvas>
</div>
<svg class = "annotationLayer"></svg>
<div class = "textLayer"></div>
</div>
<div style = "visibility: hidden;" class = "page" data-loaded = "false" id = "pageContainer9" data-page-number = "9">
<div class = "canvasWrapper">
<canvas id = "page9"></canvas>
</div>
<svg class = "annotationLayer"></svg>
<div class = "textLayer"></div>
</div>
</div>
Да, у него девять детей
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Если NodeList возвращает пустой массив, например NodeList[], ваш целевой элемент должен быть пустым. Убедитесь, что #viewer сначала содержит дочерние элементы, и что вы не использовали идентификатор дважды.
NodeList[] состоит из девяти элементов
Вы уверены, что ваш элемент состоит из 9 элементов? Или если вы пытаетесь получить правильный идентификатор? Не могли бы вы подробнее рассказать о вашем HTML? Я только что выполнил на этой странице получение содержимого элемента, и children[0] сработал. и показано, что: NodeList (5) [текст, div, текст, скрипт, текст]
@ WillianSabião щас редактирую вопрос с console.info(children)
Можете ли вы разместить свой html?
Вы уверены, что помещаете свой js после этого HTML-кода или вызываете этот код в onLoad страницы? вот так: stackoverflow.com/questions/9899372/… Я помещаю ваш код, как вы публикуете здесь, в моем jsfiddle, и он отлично работает: jsfiddle.net/xpvt214o/60513
Или, если ваш код сгенерирован после загрузки, вы должны вызывать эти строки после того, как ваш код будет на странице. Я считаю, что проблема не в этом коде, а в том, куда вы его поместили.
Позвольте нам продолжить обсуждение в чате.
Согласно документации это от MDN, childNodes возвращает «текст» и «пробелы» также как узлы.
childNodes includes all child nodes, including non-element nodes like text and comment nodes. To get a collection of only elements, use ParentNode.children instead.
Поэтому в следующем примере индексы 0, 2 и 4 являются текстовыми узлами, и мы должны получить индексы 1 и 3, чтобы получить элементы p. Вы можете сопоставить это со своим примером, или я думаю, вы можете использовать метод ParentNode.children, как описано в приведенном выше тексте.
var children = document.getElementById("viewer").childNodes;
//console.info(children); // I get a NodeList[]
console.info(children[1].innerHTML);
console.info(children[3].innerHTML);<div id = "viewer">
<p>First p element</p>
<p>Second p element</p>
</div>В этом случае я обнаружил, что проблема связана с console.info сразу после вызова childNodes, в Объект Js - Получение значения вкратце объясняется поведение console.info.
Мне кажется очевидным, что у вашего узла просто нет дочерних элементов. Не могли бы вы предоставить уменьшенную версию вашего проблемного узла?