[Javascript 기초] DOM의 이해 및 DOM 선택

https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction

DOM이란 Document Object Model로 문서 객체 모델을 말합니다.

 

DOM은 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여

그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕고, 자바스크립트 같은 스크립팅

언어가 쉽게 웹 페이지에 접근하여 조작할 수 있게끔 연결시켜 주는 역할을 담당합니다.

 

DOM의 탐색 방법에 대해 알아보겠습니다.

1. 자식요소 탐색

2. 형제요소 탐색

3. 부모요소 탐색

---

1. 자식요소 탐색

1) 부모요소.querySelector()

2) 부모요소.children - 유사배열로 출력

*유사배열 : 배열처럼 보이지만 배열은 아닌 그룹요소

<section id="wrap">
  <article class="box1">text01</article>
  <article class="box2"><a href="#">text02</a></article>
  <article class="box3">text03</article>
</section>

<script>
const wrap = document.querySelector('#wrap');
console.log(wrap); //<section id="wrap">...</section

const box2 = wrap.querySelector(".box2");
console.log(box2); //<article class="box2"><a href="#">text02</a></article>

const children = wrap.children;
console.log(children); //[article.box1, article.box2, article.box3]

const children = wrap.children;
console.log(children[0]); //<article class="box1">text01</article>

const children = wrap.children;
console.log(children[1]); //<article class="box2"><a href="#">text02</a></article>

const children = wrap.children;
console.log(children[2]); //<article class="box3">text01</article>
</script>

 

2. 형제요소 탐색

1) 이전 형제요소 탐색 : previousElementSibling

2) 다음 형제요소 탐색 : nextElementSibling

<section id="wrap">
  <article class="box1">text01</article>
  <article class="box2"><a href="#">text02</a></article>
  <article class="box3">text03</article>
</section>

<script>
const wrap = document.querySelector('#wrap');

const box2 = wrap.querySelector(".box2");
const prevEl = box2.previousElementSibling;
const nextEl = box2.nextElementSibling;

console.log(prevEl); //<article class="box1">text01</article>
console.log(nextEl); //<article class="box3">text03</article>
</script>

 

3. 부모요소 탐색

1) 현재요소.parentElement;

2) 현재요소.closest()

<section id="wrap">
  <article class="box1">text01</article>
  <article class="box2"><a href="#">text02</a></article>
  <article class="box3">text03</article>
</section>

<script>
const wrap = document.querySelector('#wrap');
const box2 = wrap.querySelector(".box2");

const a = box2.querySelector("a");
const parentEl = a.parentElement;
const grandParentEl = a.closest("#wrap");

console.log(parentEl); //<article class="box2"><a href="#">text02</a></article>
console.log(grandParentEl); //<section id="wrap">...</section>
</script>