title: Get null values when I try to access to child node in javascript
body: <p>Recently I just try to access to child nodes using <code>childNodes</code> property in javascript, but when I try to get one of its nodes I get in the console a <code>null</code> value. This is my code: </p>
  
  <pre><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
  </code></pre>
  
  <p>I spent my last two day surf in the web for this problem but I can't find a solution.  </p>
  
  <p>This is I get from console.log(children);</p>
  
  <pre><code>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
  </code></pre>
  
  <p>This is <code>div</code> code:</p>
  
  <pre><code>&lt;div id="viewer" class="pdfViewer" document-pages="9"&gt;
  &lt;div style="width: 791.776px; height: 1119.75px;" class="page" data-loaded="true" id="pageContainer1" data-page-number="1"&gt;
  &lt;div class="canvasWrapper" style="width: 791.776px; height: 1119.75px;"&gt;
    &lt;canvas id="page1" width="792" height="1120" style="width: 792px; height: 1120px;"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  &lt;/div&gt;
   &lt;div style="visibility: hidden;" class="page" data-loaded="false" id="pageContainer2" data-page-number="2"&gt;
  &lt;div class="canvasWrapper"&gt;
    &lt;canvas id="page2"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  &lt;svg class="annotationLayer"&gt;&lt;/svg&gt;
  &lt;div class="textLayer"&gt;&lt;/div&gt;
   &lt;/div&gt;
   &lt;div style="visibility: hidden;" class="page" data-loaded="false" id="pageContainer3" data-page-number="3"&gt;
  &lt;div class="canvasWrapper"&gt;
    &lt;canvas id="page3"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  &lt;svg class="annotationLayer"&gt;&lt;/svg&gt;
  &lt;div class="textLayer"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div style="visibility: hidden;" class="page" data-loaded="false" id="pageContainer4" data-page-number="4"&gt;
  &lt;div class="canvasWrapper"&gt;
    &lt;canvas id="page4"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  &lt;svg class="annotationLayer"&gt;&lt;/svg&gt;
  &lt;div class="textLayer"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div style="visibility: hidden;" class="page" data-loaded="false" id="pageContainer5" data-page-number="5"&gt;
  &lt;div class="canvasWrapper"&gt;
    &lt;canvas id="page5"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  &lt;svg class="annotationLayer"&gt;&lt;/svg&gt;
  &lt;div class="textLayer"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div style="visibility: hidden;" class="page" data-loaded="false" id="pageContainer6" data-page-number="6"&gt;
  &lt;div class="canvasWrapper"&gt;
    &lt;canvas id="page6"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  &lt;svg class="annotationLayer"&gt;&lt;/svg&gt;
  &lt;div class="textLayer"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div style="visibility: hidden;" class="page" data-loaded="false" id="pageContainer7" data-page-number="7"&gt;
  &lt;div class="canvasWrapper"&gt;
    &lt;canvas id="page7"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  &lt;svg class="annotationLayer"&gt;&lt;/svg&gt;
  &lt;div class="textLayer"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div style="visibility: hidden;" class="page" data-loaded="false" id="pageContainer8" data-page-number="8"&gt;
  &lt;div class="canvasWrapper"&gt;
    &lt;canvas id="page8"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  &lt;svg class="annotationLayer"&gt;&lt;/svg&gt;
  &lt;div class="textLayer"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div style="visibility: hidden;" class="page" data-loaded="false" id="pageContainer9" data-page-number="9"&gt;
  &lt;div class="canvasWrapper"&gt;
    &lt;canvas id="page9"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  &lt;svg class="annotationLayer"&gt;&lt;/svg&gt;
  &lt;div class="textLayer"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>