javascript - 当我尝试访问 javascript 中的子节点时获取空值

Question

最近我只是尝试使用 JavaScript 中的 childNodes 属性访问子节点，但是当我尝试获取其节点之一时，我在控制台中得到一个 null 值。这是我的代码:

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

我花了两天时间在网上浏览这个问题，但找不到解决方案。

这是我从 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

这是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>

Answer 1

如果 NodeList 返回一个空数组，例如 NodeList[]，则您的目标元素必须为空。检查以确保 #viewer 首先包含子级，并且您没有使用该 id 两次。