1

Recently I just try to access to child nodes using childNodes property in javascript, but when I try to get one of its nodes I get in the console a null value. This is my code: 

var children=document.getElementById("viewer").childNodes;
console.log(children); // I get a NodeList[]
console.log(children[0]); //I get undefined value
console.log(children.item(0)); //I get a null value

I spent my last two day surf in the web for this problem but I can't find a solution.

This is I get from console.log(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

This is div code:

<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>
Ale
  • 226
  • 1
  • 9
  • 17

3 Answers3

2

If NodeList returns an empty array, e.g NodeList[], your target element must be empty. Check to ensure that #viewer contains children first, and that you haven't used the id twice.

Michael Zaporozhets
  • 23,588
  • 3
  • 30
  • 47
  • 1
    `NodeList[]` have nine elements – Ale Apr 06 '18 at 02:19
  • Have you sure your element has 9 elements? Or if you are trying to get the correct ID? Can you give more details of your HTML? I just executed on this page getting the element content and `children[0]` worked. and shown that: NodeList(5) [text, div, text, script, text] – Willian Sabião Apr 06 '18 at 02:26
  • @WillianSabião right now I edit the question with the `console.log(children)` – Ale Apr 06 '18 at 02:28
  • Can you post your html? – Willian Sabião Apr 06 '18 at 02:29
  • Are you sure you are putting your js after this HTML code or calling this code in onLoad of the page? like that: https://stackoverflow.com/questions/9899372/pure-javascript-equivalent-of-jquerys-ready-how-to-call-a-function-when-t I put your code as you post here in my jsfiddle and it works fine: https://jsfiddle.net/xpvt214o/60513/ – Willian Sabião Apr 06 '18 at 02:49
  • Or if your code is generated after the load, you should call this lines after your code be on the page. I believe the problem isn't with this code, but it's where you put that. – Willian Sabião Apr 06 '18 at 02:52
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/168362/discussion-between-alejandro-marino-molerio-and-willian-sabiao). – Ale Apr 06 '18 at 03:07
2

According to this documentation by MDN, childNodes returns "text" and "white spaces" also as nodes.

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.

Therefore in the following example, indexes 0, 2 and 4 are text nodes and we should get indexes 1 and 3 to get the p elements. You can match this to your example or I think you may use ParentNode.children method as explained in above quoted text.

var children = document.getElementById("viewer").childNodes;
//console.log(children); // I get a NodeList[]
console.log(children[1].innerHTML);
console.log(children[3].innerHTML);
<div id="viewer">
     <p>First p element</p>
     <p>Second p element</p>
</div>
Kavindra
  • 1,697
  • 2
  • 14
  • 19
0

In this case, I found the problem relate with console.log just after childNodes call, in Js Object - Getting the Value its explained briefly about console.log behavior.

Ale
  • 226
  • 1
  • 9
  • 17