JavaScript DOM Navigation
JavaScript DOM Navigation: DOM 트리 탐색하기
JavaScript DOM Navigation은 웹 페이지의 DOM(Document Object Model) 트리 구조를 탐색하여 특정 요소에 접근하는 방법을 의미합니다. DOM은 HTML 문서의 모든 요소를 트리 형태로 구성하며, JavaScript를 사용하여 이 트리 내의 요소를 선택하고 조작할 수 있습니다. 이 가이드는 DOM 요소를 탐색하는 방법과 관련된 다양한 속성과 메서드를 설명합니다.
1. DOM 트리 구조
DOM은 HTML 문서를 트리 형태로 표현하며, 각 HTML 요소는 트리의 노드로 나타납니다. 예를 들어, 다음과 같은 HTML 문서가 있을 때:
<!DOCTYPE html>
<html>
<head>
<title>Document Title</title>
</head>
<body>
<h1>Heading</h1>
<p>This is a paragraph.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</body>
</html>
이 HTML 문서는 다음과 같은 DOM 트리 구조로 변환됩니다:
<html><head><title>
<body><h1><p><ul><li><li>
2. DOM 요소 탐색 방법
JavaScript를 사용하여 DOM 요소를 탐색하는 다양한 메서드와 속성이 있습니다.
2.1. 부모 요소 탐색
parentNode: 현재 노드의 부모 노드를 반환합니다.
<p id="myParagraph">This is a paragraph.</p>
<script>
const paragraph = document.getElementById('myParagraph');
const parent = paragraph.parentNode; // 부모 노드에 접근
console.log(parent.tagName); // BODY 출력
</script>
2.2. 자식 요소 탐색
childNodes: 현재 노드의 모든 자식 노드를 반환하는NodeList를 반환합니다.children: 현재 노드의 모든 자식 요소(HTML 요소)만 반환합니다.firstChild: 첫 번째 자식 노드를 반환합니다.lastChild: 마지막 자식 노드를 반환합니다.
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<script>
const list = document.getElementById('myList');
const items = list.childNodes; // 모든 자식 노드 가져오기
console.log(items.length); // 3 (text 노드 포함)
const listItems = list.children; // 자식 요소만 가져오기
console.log(listItems.length); // 2
</script>
2.3. 특정 자식 요소 탐색
firstElementChild: 첫 번째 자식 요소를 반환합니다.lastElementChild: 마지막 자식 요소를 반환합니다.nextSibling: 다음 형제 노드를 반환합니다.previousSibling: 이전 형제 노드를 반환합니다.nextElementSibling: 다음 형제 요소를 반환합니다.previousElementSibling: 이전 형제 요소를 반환합니다.
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<script>
const list = document.getElementById('myList');
const firstItem = list.firstElementChild; // 첫 번째 자식 요소
console.log(firstItem.textContent); // Item 1
const secondItem = firstItem.nextElementSibling; // 다음 형제 요소
console.log(secondItem.textContent); // Item 2
</script>
3. DOM 탐색을 통한 조작
DOM 요소를 탐색한 후, 원하는 요소에 접근하여 다양한 작업을 수행할 수 있습니다. 예를 들어, 특정 자식 요소의 스타일을 변경하거나 콘텐츠를 수정하는 등의 작업이 가능합니다.
3.1. 특정 자식 요소 스타일 변경
<ul id="myList">
<li style="color: red;">Item 1</li>
<li>Item 2</li>
</ul>
<script>
const list = document.getElementById('myList');
const firstItem = list.firstElementChild; // 첫 번째 자식 요소 선택
// 스타일 변경
firstItem.style.fontWeight = 'bold'; // 글자 두껍게
</script>
3.2. 특정 자식 요소 콘텐츠 변경
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<script>
const list = document.getElementById('myList');
const firstItem = list.firstElementChild; // 첫 번째 자식 요소 선택
// 콘텐츠 변경
firstItem.textContent = 'Updated Item 1'; // 텍스트 변경
</script>
4. 동적 요소 추가 및 삭제
DOM 탐색을 통해 특정 위치에 새로운 요소를 추가하거나 기존 요소를 삭제할 수 있습니다.
4.1. 새로운 요소 추가
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<button id="addItem">Add Item</button>
<script>
const list = document.getElementById('myList');
const addItemButton = document.getElementById('addItem');
addItemButton.addEventListener('click', () => {
const newItem = document.createElement('li'); // 새로운 <li> 요소 생성
newItem.textContent = `Item ${list.children.length + 1}`; // 텍스트 설정
list.appendChild(newItem); // <ul>에 추가
});
</script>
- 이 코드는 버튼 클릭 시 새로운 항목을 리스트에 추가합니다.
4.2. 기존 요소 삭제
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<button id="removeItem">Remove Last Item</button>
<script>
const list = document.getElementById('myList');
const removeItemButton = document.getElementById('removeItem');
removeItemButton.addEventListener('click', () => {
const lastItem = list.lastElementChild; // 마지막 자식 요소 선택
if (lastItem) {
list.removeChild(lastItem); // 마지막 요소 삭제
}
});
</script>
- 이 코드는 버튼 클릭 시 리스트의 마지막 항목을 삭제합니다.
5. 실시간 DOM 탐색 예시
아래는 사용자가 버튼을 클릭할 때마다 리스트에 항목을 추가하고, 이전 항목을 삭제하는 예시입니다.
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<button id="addItem">Add Item</button>
<button id="removeItem">Remove Last Item</button>
<script>
const list = document.getElementById('myList');
const addItemButton = document.getElementById('addItem');
const removeItemButton = document.getElementById('removeItem');
addItemButton.addEventListener('click', () => {
const newItem = document.createElement('li');
newItem.textContent = `Item ${list.children.length + 1}`;
list.appendChild(newItem);
});
removeItemButton.addEventListener('click', () => {
const lastItem = list.lastElementChild;
if (lastItem) {
list.removeChild(lastItem);
}
});
</script>
- 이 코드에서는 두 개의 버튼을 사용하여 항목을 추가하고 삭제할 수 있습니다.
요약
JavaScript DOM Navigation은 웹 페이지의 DOM 요소를 탐색하고 조작하는 중요한 방법입니다. 이를 통해 HTML 문서의 구조를 이해하고, 요소를 선택하고, 동적으로 변경하는 작업을 수행할 수 있습니다.
- DOM 요소 탐색 메서드:
parentNode,childNodes,firstElementChild,nextElementSibling등을 사용하여 요소 간의 관계를 탐색합니다. - DOM 요소 조작: 탐색한 요소의 스타일이나 콘텐츠를 변경할 수 있습니다.
- 동적 요소 추가 및 삭제: JavaScript를 사용하여 새로운 요소를 추가하거나 기존 요소를 삭제하는 방법을 배웠습니다.
JavaScript DOM 탐색을 활용하여 동적이고 상호작용적인 웹 애플리케이션을 구축할 수 있습니다.