JavaScript DOM Nodes
JavaScript DOM Nodes: DOM 노드의 이해와 활용
JavaScript DOM Nodes는 HTML 문서의 구조를 구성하는 기본 단위입니다. 각 요소는 DOM 트리에서 노드로 표현되며, 이를 통해 웹 페이지의 콘텐츠를 동적으로 관리하고 조작할 수 있습니다. 이 가이드는 DOM 노드의 종류, 속성 및 메서드에 대해 설명합니다.
1. DOM 노드란?
DOM 노드는 HTML 문서 내의 각 요소를 표현하는 객체입니다. DOM은 문서의 구조를 트리 형태로 구성하며, 각 노드는 다음과 같은 종류로 나눌 수 있습니다:
1.1. 주요 노드 유형
- 요소 노드 (Element Node): HTML 요소를 나타내는 노드입니다. 예를 들어,
<div>,<p>,<ul>등이 있습니다. - 텍스트 노드 (Text Node): 요소 내의 텍스트 콘텐츠를 나타내는 노드입니다. 예를 들어,
<p>Hello, World!</p>에서 "Hello, World!"는 텍스트 노드입니다. - 속성 노드 (Attribute Node): HTML 요소의 속성을 나타내는 노드입니다. 예를 들어,
<input type="text">의type속성은 속성 노드입니다. - 주석 노드 (Comment Node): HTML 주석을 나타내는 노드입니다. 예를 들어,
<!-- This is a comment -->는 주석 노드입니다.
2. DOM 노드 탐색
JavaScript를 사용하여 DOM 노드를 탐색하고 조작하는 다양한 방법이 있습니다.
2.1. 노드 선택
노드를 선택하기 위해 JavaScript의 DOM 메서드를 사용할 수 있습니다.
2.1.1. getElementById()
ID 속성으로 특정 요소를 선택합니다.
<p id="myParagraph">This is a paragraph.</p>
<script>
const paragraph = document.getElementById('myParagraph');
console.log(paragraph); // 요소 노드 출력
</script>
2.1.2. getElementsByClassName()
클래스 이름으로 여러 요소를 선택합니다.
<p class="example">First paragraph</p>
<p class="example">Second paragraph</p>
<script>
const elements = document.getElementsByClassName('example');
console.log(elements); // HTMLCollection 출력
</script>
2.1.3. querySelector()
CSS 선택자를 사용하여 첫 번째 일치하는 요소를 선택합니다.
<p class="example">First paragraph</p>
<script>
const firstPara = document.querySelector('.example');
console.log(firstPara); // 첫 번째 요소 노드 출력
</script>
3. 노드 탐색 메서드
노드를 탐색하기 위한 다양한 메서드가 있습니다.
3.1. 부모 노드 탐색
parentNode: 현재 노드의 부모 노드를 반환합니다.
const parent = paragraph.parentNode; // 부모 노드에 접근
console.log(parent.tagName); // BODY 출력
3.2. 자식 노드 탐색
childNodes: 현재 노드의 모든 자식 노드를 반환하는 NodeList를 반환합니다.children: 현재 노드의 모든 자식 요소(HTML 요소)만 반환합니다.
const childNodes = parent.childNodes; // 모든 자식 노드
console.log(childNodes.length); // 자식 노드의 개수
const children = parent.children; // 자식 요소만 가져오기
console.log(children.length); // 자식 요소의 개수
3.3. 특정 자식 요소 탐색
firstElementChild: 첫 번째 자식 요소를 반환합니다.lastElementChild: 마지막 자식 요소를 반환합니다.
const firstChild = parent.firstElementChild; // 첫 번째 자식 요소
console.log(firstChild.textContent); // 텍스트 출력
3.4. 형제 노드 탐색
nextSibling: 다음 형제 노드를 반환합니다.previousSibling: 이전 형제 노드를 반환합니다.nextElementSibling: 다음 형제 요소를 반환합니다.previousElementSibling: 이전 형제 요소를 반환합니다.
const secondChild = firstChild.nextElementSibling; // 다음 형제 요소
console.log(secondChild.textContent); // 텍스트 출력
4. 노드 조작
JavaScript를 사용하여 노드를 생성, 추가 및 삭제할 수 있습니다.
4.1. 노드 생성
createElement() 메서드를 사용하여 새로운 요소 노드를 생성할 수 있습니다.
const newElement = document.createElement('div'); // 새로운 <div> 요소 생성
newElement.textContent = 'This is a new div.'; // 텍스트 설정
4.2. 노드 추가
appendChild() 메서드를 사용하여 생성한 노드를 DOM에 추가합니다.
parent.appendChild(newElement); // 부모 노드에 새 요소 추가
4.3. 노드 삭제
removeChild() 메서드를 사용하여 특정 자식 노드를 삭제합니다.
const lastChild = parent.lastChild; // 마지막 자식 노드 선택
if (lastChild) {
parent.removeChild(lastChild); // 마지막 자식 노드 삭제
}
4.4. 노드 교체
replaceChild() 메서드를 사용하여 특정 자식 노드를 다른 노드로 교체할 수 있습니다.
const oldChild = parent.firstChild; // 교체할 노드 선택
parent.replaceChild(newElement, oldChild); // 기존 노드를 새 노드로 교체
5. 노드의 속성 접근
노드에 대한 다양한 속성을 통해 정보를 가져올 수 있습니다.
5.1. 노드의 속성
nodeType: 노드의 유형을 나타내는 숫자 (1: 요소, 3: 텍스트, 8: 주석)nodeName: 노드의 이름을 반환합니다.
console.log(firstChild.nodeType); // 1 (요소 노드)
console.log(firstChild.nodeName); // DIV (노드 이름)
5.2. 노드의 텍스트 콘텐츠
- *
textContent*를 사용하여 노드의 텍스트 콘텐츠를 읽거나 수정할 수 있습니다.
console.log(firstChild.textContent); // 노드의 텍스트 출력
firstChild.textContent = 'Updated Text'; // 텍스트 변경
요약
JavaScript DOM Nodes는 HTML 문서의 각 요소를 표현하는 객체입니다. 노드를 탐색하고 조작함으로써 웹 페이지의 콘텐츠를 동적으로 관리할 수 있습니다.
- 노드 선택 메서드:
getElementById(),getElementsByClassName(),querySelector()등을 사용하여 노드를 선택합니다. - 노드 탐색 메서드:
parentNode,childNodes,firstElementChild,nextSibling등을 사용하여 노드를 탐색합니다. - 노드 조작 메서드:
createElement(),appendChild(),removeChild(),replaceChild()를 사용하여 노드를 추가하거나 삭제합니다. - 노드의 속성:
nodeType,nodeName,textContent등을 사용하여 노드에 대한 정보를 가져올 수 있습니다.
JavaScript DOM 노드를 효과적으로 활용하여 동적이고 상호작용적인 웹 페이지를 구축할 수 있습니다.