尝试访问javascript中的子节点时获取空值
尝试访问javascript中的子节点时获取空值
提问于 2018-04-06 01:51:49
最近我只是尝试使用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>回答 3
Stack Overflow用户
发布于 2018-04-06 01:59:51
如果NodeList返回一个空数组，例如NodeList[]，那么你的目标元素必须为空。检查以确保#viewer首先包含子项，并且您没有使用该id两次。
Stack Overflow用户
发布于 2018-04-06 02:17:41
根据MDN的this文档，childNodes也将“文本”和“空格”作为节点返回。
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>
Stack Overflow用户
发布于 2018-04-06 04:15:19
在这种情况下，我发现问题与console.log有关，就在childNodes调用之后，在Js Object - Getting the Value中它简要地解释了console.log的行为。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49684077
复制相关文章
点击加载更多
相似问题
加载JSON文件以读取和选择数据
尝试从JSON文件读取和使用数据
从JSON文件读取数据
从JSON文件读取和写入JSON文件
从json文件加载数据
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
