DOM이란?
DOM(Document Object Model)은 웹 페이지의 구조화된 표현으로, 문서의 각 요소를 객체로 표현하여 JavaScript에서 해당 요소를 조작할 수 있게 합니다. DOM은 트리 구조로 되어 있으며, HTML 문서의 각 태그는 노드(Node)로 표현됩니다.
DOM의 기본 구조
DOM 트리는 루트 노드인 document 객체를 포함하며, 모든 요소와 텍스트 노드는 이 트리의 자식 노드입니다. 각 노드는 부모 노드, 자식 노드, 형제 노드를 가질 수 있습니다.
예제
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</body>
</html>이 HTML 문서의 DOM 트리는 다음과 같이 표현됩니다:
document
└── html
├── head
│ ├── title
│ │ └── "Document"
└── body
├── h1
│ └── "Hello, World!"
└── p
└── "This is a paragraph."요소 선택
DOM 요소를 선택하여 조작하기 위해 다양한 메서드를 사용할 수 있습니다.
getElementById
getElementById 메서드는 특정 ID를 가진 요소를 반환합니다.
예제
<h1 id="title">Hello, World!</h1>
<script>
let titleElement = document.getElementById('title');
console.log(titleElement.textContent); // 'Hello, World!'
</script>getElementsByClassName
getElementsByClassName 메서드는 특정 클래스를 가진 모든 요소를 반환합니다.
예제
<p class="text">Paragraph 1</p>
<p class="text">Paragraph 2</p>
<script>
let textElements = document.getElementsByClassName('text');
console.log(textElements.length); // 2
</script>getElementsByTagName
getElementsByTagName 메서드는 특정 태그 이름을 가진 모든 요소를 반환합니다.
예제
<h1>Heading 1</h1>
<h1>Heading 2</h1>
<script>
let headingElements = document.getElementsByTagName('h1');
console.log(headingElements.length); // 2
</script>querySelector
querySelector 메서드는 지정한 CSS 선택자와 일치하는 첫 번째 요소를 반환합니다.
예제
<p class="text">Paragraph 1</p>
<script>
let textElement = document.querySelector('.text');
console.log(textElement.textContent); // 'Paragraph 1'
</script>querySelectorAll
querySelectorAll 메서드는 지정한 CSS 선택자와 일치하는 모든 요소를 반환합니다.
예제
<p class="text">Paragraph 1</p>
<p class="text">Paragraph 2</p>
<script>
let textElements = document.querySelectorAll('.text');
textElements.forEach(element => console.log(element.textContent));
// 'Paragraph 1'
// 'Paragraph 2'
</script>노드 탐색
DOM 트리에서 노드를 탐색하기 위해 다양한 속성과 메서드를 사용할 수 있습니다.
부모 노드 접근
parentNode 속성을 사용하여 부모 노드에 접근할 수 있습니다.
예제
<div id="parent">
<p id="child">This is a child paragraph.</p>
</div>
<script>
let childElement = document.getElementById('child');
let parentElement = childElement.parentNode;
console.log(parentElement.id); // 'parent'
</script>자식 노드 접근
childNodes 속성과 children 속성을 사용하여 자식 노드에 접근할 수 있습니다.
예제
<div id="parent">
<p>This is a child paragraph.</p>
<p>Another child paragraph.</p>
</div>
<script>
let parentElement = document.getElementById('parent');
console.log(parentElement.childNodes.length); // 5 (공백 텍스트 노드 포함)
console.log(parentElement.children.length); // 2
</script>형제 노드 접근
nextSibling과 previousSibling 속성을 사용하여 형제 노드에 접근할 수 있습니다.
예제
<div>
<p id="first">First paragraph.</p>
<p id="second">Second paragraph.</p>
</div>
<script>
let firstElement = document.getElementById('first');
let secondElement = firstElement.nextSibling.nextSibling;
console.log(secondElement.id); // 'second'
</script>결론
DOM은 웹 페이지의 구조화된 표현으로, JavaScript를 사용하여 문서의 요소를 선택하고 조작할 수 있게 합니다. 이번 글에서는 DOM의 기본 개념, 요소 선택 방법, 노드 탐색 방법에 대해 배웠습니다. 다음 글에서는 DOM 조작 기초에 대해 알아보겠습니다.
다음 글에서 만나요!
'JavaScript 문법 시리즈' 카테고리의 다른 글
| [JavaScript 문법] 38일차: DOM 조작 심화 (1) | 2024.09.08 |
|---|---|
| [JavaScript 문법] 37일차: DOM 조작 기초 (0) | 2024.09.07 |
| [JavaScript 문법] 35일차: 모던 JavaScript 문법 (0) | 2024.09.05 |
| [JavaScript 문법] 34일차: JavaScript 성능 최적화 (0) | 2024.09.04 |
| [JavaScript 문법] 33일차: Proxy와 Reflect (0) | 2024.09.03 |