문서 객체 모델 (DOM)

문서 객체 모델 (DOM)

문서 객체 모델(DOM)은 자바스크립트를 이용해 HTML 문서에 접근하고 제어할 수 있도록 하는 객체 기반의 구조입니다. DOM을 사용하면 웹 페이지의 구조를 자바스크립트로 동적으로 변경할 수 있습니다. DOM은 트리 구조로 되어 있으며, HTML의 각 요소는 노드(Node)라는 객체로 표현됩니다.

 

DOM 쓰는 이유 : 페이지를 처음 로드한 이후에도 자바스크립트를 통해 새로운 요소를 추가하거나, 스타일을 변경하거나, 이벤트를 처리하는 등 동적인 조작이 가능 !!!

---

DOM의 기본 구성

1. 요소 노드 (Element Node): 모든 HTML 태그는 요소 노드로 간주됩니다. 각 HTML 태그가 트리 구조에서 하나의 노드로 존재합니다.
2. <div> <!-- 요소 노드 --> <p>Hello, World!</p> <!-- 요소 노드 --> </div>
3. 텍스트 노드 (Text Node): HTML 요소 안에 있는 텍스트는 텍스트 노드로 표현됩니다.
4. <p>Hello, World!</p> <!-- "Hello, World!"는 텍스트 노드 -->
5. 속성 노드 (Attribute Node): HTML 태그에 지정된 속성은 속성 노드로 간주됩니다.
6. <img src="image.jpg" alt="sample image"> <!-- src와 alt가 속성 노드 -->
7. 주석 노드 (Comment Node): HTML 문서 내에 있는 주석은 주석 노드로 표현됩니다.
8. <!-- This is a comment -->

---

DOM 요소 선택하기

DOM에서 HTML 요소를 선택하여 제어하려면 다양한 메서드를 사용할 수 있습니다.

1. getElementById(): 특정 ID를 가진 요소를 선택합니다.
2. const element = document.getElementById('myElement');
3. getElementsByClassName(): 특정 클래스를 가진 모든 요소를 선택합니다. HTMLCollection을 반환하며, 배열처럼 인덱스로 접근할 수 있습니다.
4. const elements = document.getElementsByClassName('myClass');
5. getElementsByTagName(): 특정 태그명을 가진 모든 요소를 선택합니다.
6. const elements = document.getElementsByTagName('p');
7. querySelector(): CSS 선택자를 사용하여 첫 번째 요소만 선택합니다.
8. const element = document.querySelector('.myClass');
9. querySelectorAll(): CSS 선택자를 사용하여 일치하는 모든 요소를 선택하며, NodeList를 반환합니다.
10. const elements = document.querySelectorAll('.myClass');

---

DOM 요소 내용 가져오고 수정하기

DOM 요소의 내용을 가져오거나 수정하는 방법은 다음과 같습니다.

1. innerText: 요소의 텍스트 내용을 가져오거나 수정할 때 사용합니다. CSS에 따라 숨겨진 텍스트는 무시됩니다.
2. const element = document.getElementById('myElement'); console.log(element.innerText); element.innerText = "새로운 텍스트";
3. innerHTML: 요소의 HTML 내용을 가져오거나 수정할 때 사용합니다. HTML 태그를 포함한 내용을 처리합니다.
4. const element = document.getElementById('myElement'); console.log(element.innerHTML); element.innerHTML = "<b>강조된 텍스트</b>";
5. textContent: 요소의 모든 텍스트 내용을 가져오거나 수정합니다. CSS로 숨겨진 텍스트도 포함됩니다.
6. const element = document.getElementById('myElement'); console.log(element.textContent); element.textContent = "텍스트 내용";

---

DOM에서 이벤트 처리하기

1. addEventListener(): 이벤트를 등록하여 요소에서 특정 동작을 수행할 수 있습니다.
2. const button = document.querySelector("button"); button.addEventListener("click", function() { alert("버튼이 클릭되었습니다!"); });
3. CSS 속성에 접근하기: 자바스크립트로 CSS 스타일을 동적으로 변경할 수 있습니다.
4. const element = document.getElementById('myElement'); element.style.color = "red"; // 텍스트 색상을 빨간색으로 변경

---

DOM에서 노드 추가 및 삭제

1. 노드 리스트 (NodeList): querySelectorAll() 메서드로 반환되는 객체로, 배열처럼 인덱스로 접근할 수 있지만, 배열은 아닙니다. 배열 메서드를 사용하려면 Array.from() 등을 사용해 배열로 변환해야 합니다.
2. const items = document.querySelectorAll('li'); items.forEach(item => console.log(item.textContent));
3. 요소 추가하기
   • createElement(): 새로운 HTML 요소를 생성합니다.
   • const newDiv = document.createElement('div'); newDiv.innerText = "새로운 요소";
   • createTextNode(): 텍스트 노드를 생성합니다.
   • const newText = document.createTextNode('새로운 텍스트');
   • appendChild(): 새로 생성한 요소나 텍스트 노드를 DOM에 추가합니다.
   • const parentDiv = document.getElementById('parent'); parentDiv.appendChild(newDiv);
4. 노드 삭제하기
   • remove(): 요소를 DOM에서 삭제합니다.

     const element = document.getElementById('myElement');
     element.remove();

---

클래스 속성 추가 및 삭제

1. classList.add(): 클래스 속성을 추가합니다.
2. const element = document.getElementById('myElement'); element.classList.add('newClass');
3. classList.remove(): 클래스 속성을 제거합니다.
4. element.classList.remove('newClass');
5. classList.toggle(): 클래스가 있으면 제거하고, 없으면 추가합니다.
6. element.classList.toggle('active');

---

DOMContentLoaded 이벤트

문서의 모든 내용이 불러와졌는지 확인하려면 DOMContentLoaded 이벤트를 사용할 수 있습니다. 이 이벤트는 페이지가 완전히 로드되지 않아도, DOM 트리의 구성이 완료되면 발생합니다.

document.addEventListener("DOMContentLoaded", function() {
    console.log("문서가 모두 로드되었습니다.");
});

---

추가 개념

1. 부모, 자식, 형제 노드 탐색
   • parentNode: 부모 노드에 접근합니다.
   • const parent = document.getElementById('myElement').parentNode;
   • children: 자식 노드들을 가져옵니다. HTMLCollection을 반환합니다.
   • const children = document.getElementById('myElement').children;
   • nextSibling: 바로 다음 형제 노드에 접근합니다.
   • const next = document.getElementById('myElement').nextSibling;
   • previousSibling: 바로 이전 형제 노드에 접근합니다.
   • const prev = document.getElementById('myElement').previousSibling;
2. 노드 복제
   • cloneNode(): 노드를 복제할 수 있습니다. true를 인자로 전달하면 자식 노드까지 함께 복사합니다.

     const clone = document.getElementById('myElement').cloneNode(true);

---

요약

• DOM은 자바스크립트로 웹 페이지를 동적으로 제어하기 위한 트리 구조의 모델입니다.
• 요소 선택 및 수정, 노드 추가 및 삭제, 이벤트 처리 등을 통해 HTML 문서를 동적으로 다룰 수 있습니다.
• 자바스크립트로 클래스, 스타일 등을 변경하여 웹 페이지를 동적으로 관리할 수 있습니다.