返回课程

统计后代节点

重要性:5

有一个树形结构,由嵌套的 ul/li 组成。

编写代码,为每个 <li> 显示

  1. 它内部的文本(不包括子树)
  2. 嵌套的 <li> 的数量 - 所有后代节点,包括深度嵌套的节点。

在新窗口中演示

打开任务的沙盒。

让我们遍历 <li>

for (let li of document.querySelectorAll('li')) {
  ...
}

在循环中,我们需要获取每个 li 内部的文本。

我们可以从 li 的第一个子节点(即文本节点)读取文本。

for (let li of document.querySelectorAll('li')) {
  let title = li.firstChild.data;

  // title is the text in <li> before any other nodes
}

然后我们可以获取后代节点的数量,方法是 li.getElementsByTagName('li').length

在沙盒中打开解决方案。