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

从头开始构建这个基本的待办事项列表，尝试自学Javascript。我通过API发现有一个firstChild函数，它将以父节点的第一个子节点为目标

如果我有

<div class = "parentNode">

  <div id = "i0">
   TEXT HERE
  </div>

  <div id = "i1">
  </div>

</div>

---

为什么不在警告框中返回文本？

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

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

正在查找id。这可以通过在元素上使用

id=“parentNode

来解决，也可以使用

接下来，

alert（'childNode'）；

将始终提醒字符串“

childNode

”而不是变量

childNode

，因此需要

alert（childNode）

最后，也许也是最有趣的，是

。firstChild

将获得子节点集的第一个

childNode

。这可以是一个

#text

节点（它就是这样），因为

的结尾和

的开头之间使用了空格

与使用

.firstChild

不同，您可以使用只查看元素的

子项[0]

document.getElementById（'myButton'）。onclick=function（）{
var parentNode=document.querySelector（'.parentNode'）；
var childNode=parentNode.children[0].innerHTML；
警报（childNode）；
}

单击以检查节点
此处文本

请注意，浏览器对待元素之间空白的方式有所不同。有些浏览器会将它们转换为空文本节点，因此.parentNode的第一个子节点将是空文本节点（它没有innerHTML属性），其他人将忽略空白，第一个子元素将是div元素#i0.PERFECT！非常感谢您的详细解释。您解决了我的所有问题，我现在可以使用实际代码了。还有一个更新的元素。firstElementChild实现了firstChild应该实现的功能

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

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