Question

从头开始构建这个基本的待办事项列表，尝试自学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');

}

为什么这不会在警告框中返回TEXT？

Answer 1

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

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

正在寻找一个id。这可以通过在元素上使用id="parentNode来解决，也可以使用querySelector^MDN

按类名进行查询

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

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

最后，也许最有趣的是，.firstChild将获得该组childNodes的第一个childNode。这可以是#text节点（它是），因为在<div class = "parentNode">的结尾和<div id = "i0">的开头之间使用的空格。

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

＆＃13;

document.getElementById('myButton').onclick = function () {

   var parentNode = document.querySelector('.parentNode');
   var childNode  = parentNode.children[0].innerHTML;
   alert(childNode);

}

＆＃13;

<button id="myButton" type="button">Click To Check Node</button>
<div class = "parentNode">

  <div id = "i0">
   TEXT HERE
  </div>

  <div id = "i1">
  </div>

</div>

＆＃13;

在Javascript中进行DOM遍历的firstChild节点问题

1 个答案: