Javascript 中 DOM 遍历的第一个子节点问题

firstChild node issue for DOM traversal in Javascript

本文关键字：第一个 子节点 问题 遍历 DOM Javascript      更新时间：2023-09-26
从头开始

构建这个基本的待办事项列表，以尝试自学Javascript。我通过 API 发现有一个 firstChild 函数将针对父节点的第一个子节点。

如果我有..

<div class = "parentNode">
  <div id = "i0">
   TEXT HERE
  </div>
  <div id = "i1">
  </div>
</div>

然后我有一些指定给该功能的按钮：

document.getElementById('myButton').onclick = function () {
   var parentNode = document.getElementById('parentNode');
   var childNode  = parentNode.firstChild.innerHTML;
   alert('childNode');
}

为什么这不会在警报框中返回文本？

这里有一些事情发生。首先，您正在寻找一个不存在的元素

var parentNode = document.getElementById('parentNode');

正在查找 ID。这可以通过在元素上使用id="parentNode来补救，或者您可以使用 MDN 按类名查询querySelector

var parentNode = document.querySelector('.parentNode');

接下来，alert('childNode');将始终提醒字符串"childNode"而不是变量childNode，因此需要alert(childNode)。

最后，也许也是最有趣的是，.firstChild将获得子节点集的第一childNode。这可以是一个#text节点（确实如此），因为在<div class = "parentNode">的末尾和<div id = "i0">的开头之间使用了空格。

与使用 .firstChild 相反，您可以使用只查看元素的children[0]。下面是显示此行为的代码段。

document.getElementById('myButton').onclick = function () {
   var parentNode = document.querySelector('.parentNode');
   var childNode  = parentNode.children[0].innerHTML;
   alert(childNode);
}
<button id="myButton" type="button">Click To Check Node</button>
<div class = "parentNode">
  <div id = "i0">
   TEXT HERE
  </div>
  <div id = "i1">
  </div>
</div>

相关文章：