div无法识别其子元素（javascript）

Question

代码布局： 一个.html文件＆amp;我链接到外部的.js和.css。各种表格单元格onclick使“弹出”div改变其位置并变得可见。为此，我使JS函数引用了一个全局变量，我通过添加来设置它 <script>var popup = document.getElementById('popdiv');</script> 就在/ body的末尾。

popdiv有3个子元素：

<div id='popdiv'>
<div class='header'>Time Slot</div>
<div class='xout' onclick='hide(event)'>X</div>
<div class='showtag'>tag1, tag2, tag3, tag4, tag5, tag6, tag7, tag8, tag9, tag10, tag11</div>
</div>

我使用弹出窗口做的任何工作都很好，除非我尝试调用popup.firstChild，这会搞砸一切。 popup.firstChild.type返回undefined，popup.childNodes.length返回7.我给嵌套div一个id，所以我可以抓住它; [getheader] .parentNode.type也是未定义的。

我将.css文件中的.header选择器替换为popdiv选择器（#popdiv >:first-child）的第一个孩子，并且其样式仍然正确应用;所有3个孩子也将继承样式属性，如color：red - 如果我在CSS文件中设置它们。如果我用JavaScript设置它们不是这样。

在这种情况下，还有其他方法可以访问div，但我想知道为了理解JavaScript到底发生了什么 - 或者我是否误解了关于父子HTML元素的基本内容。我做了一些可能破坏其他事情的糟糕事情吗？ （在文件末尾有额外的脚本感觉不对，但我不知道它不能正常工作的实际原因。）

提前谢谢

Answer 1

按照here所述尝试document.getElementById('popdiv').children[0] - 获取第一个孩子。您也可以使用popup.firstElementChild来获得相同的结果。

您可以使用document.getElementById('popdiv').children来吸引所有孩子。