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（儿童）获得的;

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。

Answer 2

根据MDN的this文档，childNodes还将“text”和“white spaces”作为节点返回。

childNodes包括所有子节点，包括非元素节点，如文本和注释节点。要获取仅元素的集合，请改用ParentNode.children。

因此，在以下示例中，索引0,2和4是文本节点，我们应该获取索引1和3以获取p元素。您可以将其与您的示例相匹配，或者我认为您可以使用上文引用文字中所述的ParentNode.children方法。

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>

Answer 3

在这种情况下，我发现问题与console.log调用之后的childNodes有关，在Js Object - Getting the Value中简要解释了console.log行为。

当我尝试访问javascript

3 个答案: