자식 결합자로 직접 하위 요소 선택하기

지금까지 요소를 태그, 클래스, 또는 ID로 선택하는 방법을 잘 아시죠. 하지만 이런 선택자가 통하지 않는 경우도 있어요. 예를 들어, 최상단 ul 요소의 직접 하위 요소만 추출하고 싶을 때입니다. 이를 위해 영상에서 소개한 자식 결합자(>)를 사용합니다.

여기서는 languages_html 문서에 포함된 목록에서 언급된 모든 컴퓨터 언어만 긁어오되, 하위 글머리표에 있는 부가 정보는 제외하는 것이 목표예요:

  <ul id = 'languages'>
    <li>SQL</li>
    <ul>    
      <li>Databases</li>
      <li>Query Language</li>
    </ul>
    <li>R</li>
    <ul>
      <li>Collection</li>
      <li>Analysis</li>
      <li>Visualization</li>
    </ul>
    <li>Python</li>
  </ul>

1

먼저, 위에 보이는 중첩 목록의 li 요소를 모두 모아 해당 텍스트를 출력하세요.

2

이번에는 자식 결합자를 사용해 최상위 ul 요소의 직접 하위 요소만 추출해 보세요.