レッスンに戻る

子孫をカウントする

重要度: 5

ul/li がネストされた構造のツリーがあります。

以下を表示するコードを書いてください。

  1. <li> 内のテキスト (サブツリーを除く)
  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 で子孫の数を取得できます。

サンドボックスでソリューションを開く。