DOM 트리 접근하기

yoonmikim·2023년 4월 7일

인터랙티브 자바스크립트

목록 보기

6/6

<body>
  <div class="content">
    <h2 class="title-1">Cat-1</h2>
    <ul class="list-1">
      <li>Ragdoll</li>
      <li>British Shorthair</li>
      <li>Scottish Fold</li>
      <li>Bengal</li>
      <li>Siamese</li>
      <li>Maine Coon</li>
      <li>American Shorthair</li>
      <li>Russian Blue</li>
    </ul>
    <h2 class="title-2">Cat-2</h2>
    <ul class="list-2">
      <li>Ragdoll</li>
      <li>British Shorthair</li>
      <li>Scottish Fold</li>
      <li>Bengal</li>
      <li>Siamese</li>
      <li>Maine Coon</li>
      <li>American Shorthair</li>
      <li>Russian Blue</li>
    </ul>
  </div>
  <script src="/script.js"></script>
</body>

const myTag = document.querySelector('.content');
const catList = document.querySelector('.list-1');

console.log(myTag);

// 부모 요소 노드
console.log(myTag.parentElement);

// 자식 요소 노드
console.log(myTag.children[1]);
console.log(myTag.firstElementChild);
console.log(myTag.lastElementChild);

// 형제 요소 노드
console.log(myTag.previousElementSilbling);
console.log(myTag.nextElementSibling);

// 서로 연결해서 탐색
console.log(catList.parentElement.nextElementSibling);

<div class="content">...</div>

<body>...</body>

<h2 class="title-1">Cat-1</h2>
<ul class="list-1">...</ul>
undefined

null
<script src="/script.js"></script>

<script src="/script.js"></script>

yoonmikim

DOM 트리 접근하기

인터랙티브 자바스크립트

0개의 댓글