돌아가기

후손 노드 개수 세기

중요도: 5

ulli 노드로 구성된 트리 구조 문서가 있다고 가정해봅시다.

li 노드 전체를 대상으로 아래와 같은 작업을 하려 합니다. 조건을 만족시킬 수 있는 코드를 작성해보세요.

  1. li 노드 안에 있는 텍스트를 출력
  2. li 노드 아래에 있는 모든 <li> 태그의 개수를 출력

새 창에서 데모 보기

샌드박스를 열어 정답을 작성해보세요.

<li>를 이용한 반복문을 만들어 봅시다.

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

반복문 안에서 각각의 li 안에 있는 텍스트를 가져와야 합니다.

li의 첫 번째 자식 노드인 텍스트 노드로부터 텍스트를 읽을 수 있습니다.

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

  // title은 <li> 안에 있는 다른 노드들보다 앞에 위치한 텍스트입니다.
}

그리고 li.getElementsByTagName('li').length를 이용해 li 노드 아래에 있는 모든 <li> 태그의 개수를 가져올 수 있습니다.

샌드박스를 열어 정답을 확인해보세요.