JavaScript DOM

자바스크립트의 DOM(Document Object Model)은 웹 페이지의 구조를 표현하는 객체 기반 인터페이스입니다. DOM은 HTML 문서의 요소를 노드 객체로 나타내어 자바스크립트가 이를 조작할 수 있도록 합니다. 이를 통해 동적인 웹 페이지를 만들 수 있습니다.

1. DOM 개요

DOM은 HTML 문서의 구조를 계층적 트리 형태로 나타내며, 각 요소, 속성, 텍스트를 노드로 표현합니다. 주요 노드 타입은 다음과 같습니다:

• 문서 노드 (Document Node): DOM 트리의 최상위 노드.
• 요소 노드 (Element Node): HTML 태그를 나타내는 노드.
• 텍스트 노드 (Text Node): 요소 내의 텍스트를 나타내는 노드.
• 속성 노드 (Attribute Node): 요소의 속성을 나타내는 노드.
• 주석 노드 (Comment Node): 주석을 나타내는 노드.

2. DOM 접근과 탐색

2.1 DOM 접근

DOM 요소에 접근하기 위한 여러 가지 메서드가 있습니다.

• document.getElementById(id): 특정 ID를 가진 요소를 반환합니다.
• document.getElementsByClassName(className): 특정 클래스를 가진 모든 요소를 HTMLCollection으로 반환합니다.
• document.getElementsByTagName(tagName): 특정 태그 이름을 가진 모든 요소를 HTMLCollection으로 반환합니다.
• document.querySelector(selector): CSS 선택자에 맞는 첫 번째 요소를 반환합니다.
• document.querySelectorAll(selector): CSS 선택자에 맞는 모든 요소를 NodeList로 반환합니다.

// 예시
const elementById = document.getElementById('myId');
const elementsByClassName = document.getElementsByClassName('myClass');
const elementsByTagName = document.getElementsByTagName('div');
const elementBySelector = document.querySelector('.myClass');
const elementsBySelectorAll = document.querySelectorAll('.myClass');

2.2 DOM 탐색

DOM 트리 내에서 노드를 탐색하기 위한 속성이 있습니다.

• parentNode: 부모 노드를 반환합니다.
• childNodes: 자식 노드를 NodeList로 반환합니다.
• firstChild, lastChild: 첫 번째 및 마지막 자식 노드를 반환합니다.
• previousSibling, nextSibling: 이전 및 다음 형제 노드를 반환합니다.

// 예시
const parent = elementById.parentNode;
const children = elementById.childNodes;
const firstChild = elementById.firstChild;
const lastChild = elementById.lastChild;
const previousSibling = elementById.previousSibling;
const nextSibling = elementById.nextSibling;

3. DOM 조작

3.1 요소 생성과 추가

• document.createElement(tagName): 새로운 요소를 생성합니다.
• element.appendChild(newChild): 자식 요소로 추가합니다.
• element.insertBefore(newChild, referenceChild): 참조 요소 앞에 새로운 자식 요소를 추가합니다.

// 예시
const newDiv = document.createElement('div');
const newText = document.createTextNode('Hello World');
newDiv.appendChild(newText);
document.body.appendChild(newDiv);

3.2 요소 제거

• element.removeChild(child): 자식 요소를 제거합니다.
• element.remove(): 요소 자체를 제거합니다.

// 예시
const toBeRemoved = document.getElementById('toBeRemoved');
toBeRemoved.remove();

3.3 요소 복제

• element.cloneNode(deep): 요소를 복제합니다. deep이 true이면 자식 노드도 복제합니다.

// 예시
const clonedElement = elementById.cloneNode(true);
document.body.appendChild(clonedElement);

4. 속성 조작

4.1 속성 접근과 설정

• element.getAttribute(name): 속성 값을 반환합니다.
• element.setAttribute(name, value): 속성 값을 설정합니다.
• element.removeAttribute(name): 속성을 제거합니다.

// 예시
const myElement = document.getElementById('myElement');
const attrValue = myElement.getAttribute('data-custom');
myElement.setAttribute('data-custom', 'newValue');
myElement.removeAttribute('data-custom');

4.2 클래스 조작

• element.classList: 클래스 속성을 조작할 수 있는 DOMTokenList 객체를 반환합니다.

// 예시
myElement.classList.add('newClass');
myElement.classList.remove('oldClass');
myElement.classList.toggle('toggleClass');
const hasClass = myElement.classList.contains('myClass');

5. 스타일 조작

• element.style: 인라인 스타일을 설정하거나 가져옵니다.

// 예시
myElement.style.color = 'red';
myElement.style.backgroundColor = 'blue';

• window.getComputedStyle(element): 계산된 스타일을 가져옵니다.

// 예시
const computedStyle = window.getComputedStyle(myElement);
const backgroundColor = computedStyle.backgroundColor;

6. 이벤트 처리

이벤트는 사용자가 웹 페이지와 상호작용할 때 발생합니다. 이벤트 처리기를 통해 이러한 이벤트에 반응할 수 있습니다.

6.1 이벤트 등록

• element.addEventListener(type, listener): 이벤트 리스너를 등록합니다.
• element.removeEventListener(type, listener): 이벤트 리스너를 제거합니다.

// 예시
function handleClick(event) {
  console.log('Element clicked:', event.target);
}

myElement.addEventListener('click', handleClick);

// 나중에 제거
myElement.removeEventListener('click', handleClick);

6.2 이벤트 객체

이벤트가 발생하면 이벤트 객체가 리스너 함수에 전달됩니다. 이 객체에는 이벤트에 대한 정보가 담겨 있습니다.

// 예시
function handleEvent(event) {
  console.log('Event type:', event.type);
  console.log('Target element:', event.target);
  console.log('Mouse coordinates:', event.clientX, event.clientY);
}

myElement.addEventListener('click', handleEvent);

7. DOMContentLoaded 이벤트

DOMContentLoaded 이벤트는 초기 HTML 문서가 완전히 로드되고 파싱되었을 때 발생합니다. 모든 DOM 요소가 사용할 준비가 되었을 때 실행할 코드를 넣는 것이 좋습니다.

document.addEventListener('DOMContentLoaded', (event) => {
  console.log('DOM fully loaded and parsed');
  // DOM 조작 코드를 여기에 작성
});

결론

자바스크립트의 DOM은 웹 페이지의 구조를 동적으로 변경하고 사용자와 상호작용을 가능하게 하는 강력한 도구입니다. DOM 접근, 탐색, 조작, 이벤트 처리를 통해 풍부한 사용자 경험을 제공하는 웹 애플리케이션을 개발할 수 있습니다. DOM을 잘 이해하고 활용하는 것은 자바스크립트 개발자의 중요한 기술입니다.