为何获取id为apanelofcontent的div内首个div的id返回undefined？

我需要获取id为apanelofcontent的div内部第一个div的id值，期望控制台输出panel1，但运行以下代码后得到的结果是undefined，请问哪里出错了？

代码示例 #

JavaScript代码

let text = document.getElementById("apanelofcontent").firstChild.id;
console.log(text);

HTML代码

<div class="apanelofcontent" id="apanelofcontent">
  <div class="panel1" id="panel1" name="panel1">
    <p>Content goes here</p>
  </div>
  <div class="panel1link" id="panel1link">
    <p><a href="#ex1" rel="modal:open">Open modal</a></p>
  </div>
</div>

firstChild会返回父元素下的第一个节点，包括文本节点（HTML里的换行、空格、缩进这类空白字符都会被解析成Text节点）。你的HTML里apanelofcontent标签和第一个子div之间有换行和缩进，所以firstChild拿到的是这个空白文本节点，它没有id属性，自然返回undefined。

可以用以下几种方式获取目标元素：

• 使用firstElementChild：只返回第一个元素节点（跳过文本节点）

  let text = document.getElementById("apanelofcontent").firstElementChild.id;
  console.log(text); // 输出panel1
  

• 使用children集合：通过索引获取第一个元素节点

  let text = document.getElementById("apanelofcontent").children[0].id;
  console.log(text); // 输出panel1
  

• 使用querySelector：直接选择子元素

  let text = document.getElementById("apanelofcontent").querySelector("div").id;
  console.log(text); // 输出panel1
  

内容的提问来源于stack exchange，提问作者covgdn