공부한 과목/h2>

신청한 과목

"> Documnet

공부한 과목/h2>

신청한 과목

"> Documnet

공부한 과목/h2>

신청한 과목

"> 
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Documnet</title>
</head>
<body>
  <h2>공부한 과목/h2>
  <ul id="study-list">
    <li>인터랙티브 자바스크립트</li>
    <li>프로그래밍 언어 이해하기</li>
    <li>프로그래머의 세계 이해하기</li>
    <li>소프트웨어 이해하기</li>
  </ul>
  <h2>신청한 과목</h2>
  <ul id="apply-list">
    <li>프로그래밍 시작하기 in JavaScript</li>
    <li>프로그래밍 핵심 개념 in JavaScript</li>
    <li>프로그래밍과 데이터 in JavaScript</li>
    <li>HTML/CSS 시작하기</li>
    <li>HTML/CSS 핵심 개념</li>
    <li>반응형 웹 퍼블리싱</li>
  </ul>
  <script src="index.js"></script>
</body>
</html>


const standard = document.querySelector('body');

HTML 코드와 주어진 변수를 가지고 접근 결과를 적는다

▼ 문제 풀이 (1)

standard.children[2].previousElementSibling.children[0];

풀이 : body의 2번째 인덱스의 자식 - <h2>신청한 과목 </h2>

이전의 형제 요소 노드 - <ul id =”study-list>

0번째 인덱스 자식 - <li> 인터렉티브 자바스크립트</li>

■ 최종 출력 결과 - <li> 인터렉티브 자바스크립트</li>

standard.firstElementChild.nextElementSibling.firstElementChild;

풀이 : body의 가장 첫 번째의 자식 요소 - <h2>공부한 과목</h2>

그 다음 형제 노드 - <ul id =”study-list>

가장 첫 번째의 자식 요소 - <li> 인터렉티브 자바스크립트 </li>

■ 최종 출력 결과 - <li> 인터렉티브 자바스크립트</li>