DOM(Document Object Model)이란?
DOM(Document Object Model): HTML 문서를 객체 기반의 트리 구조로 표현. JavaScript로 HTML 요소를 동적으로 조작 가능
🌳 DOM 구조 시각화 도구
DOM Visualizer: 웹 페이지의 DOM 구조를 시각적으로 표현
Live DOM Viewer: 실시간 HTML 입력 및 DOM 구조 확인 가능
HTML 코드 예제
<html>
<head>
<title>DOM 트리</title>
</head>
<body>
<div id="container">
<h1>안녕하세요</h1>
<p>이것은 <span>간단한</span> DOM 트리 예제입니다.</p>
</div>
</body>
</html>이 HTML 코드의 DOM 트리 구조 형성
이 구조에서 각 HTML 요소는 DOM 트리의 노드가 됨
⇒ 이미지처럼 요소 간의 관계(부모-자식, 형제)를 명확히 볼 수 있음
공백과 줄바꿈도 텍스트 노드로 인식됨
✅ HTML 안의 모든 것은 (심지어 주석이더라도) DOM을 구성함
자바스크립트로 HTML 접근하기
자바스크립트를 사용한 HTML 문서의 DOM 접근 및 조작 방법 다양. 가장 기본적인 DOM 접근 메서드 소개
document.querySelector() ⭐️
CSS 선택자를 사용하여 일치하는 첫 번째 요소 반환. 여러 요소 일치 시에도 첫 번째로 발견된 요소만 반환
매우 유연하고 복잡한 선택자 사용 가능
CSS 선택자를 사용한 접근 방법
element: 태그 이름으로 선택 (예:div)#id: ID로 선택 (예:#myElement).class: 클래스로 선택 (예:.myClass)[attribute]: 속성으로 선택 (예:[type="text"])selector1, selector2: 다중 선택 (예:div, p)selector1 selector2: 자손 선택 (예:div p)selector1 > selector2: 직계 자식 선택 (예:ul > li)
// ID로 단일 요소 선택
const singleEl = document.querySelector('#myId');
// 클래스로 모든 요소 선택
const allEl = document.querySelectorAll('.myClass');document.querySelectorAll() ⭐️
CSS 선택자와 일치하는 모든 요소를 NodeList로 반환. 반복 작업 수행 가능
NodeList는 유사 배열 객체로, 여러 요소에 대한 반복 작업 수행 가능. 예: document.querySelectorAll('.myClass')는 'myClass' 클래스를 가진 모든 요소 선택. 여러 요소를 한 번에 선택하고 조작하는 데 유용
유사배열이기 때문에 [ ]로 접근 가능
//전체
const pEl = document.querySelectorAll('p');
//일부
const firstpEl = document.querySelectorAll('p')[2];document.getElementById()
주어진 ID와 일치하는 단일 요소 반환. 문서 내에서 유일해야 함
const element = document.getElementById('myElement');document.getElementsByClassName()
주어진 클래스 이름을 가진 모든 요소를 HTMLCollection으로 반환
const elements = document.getElementsByClassName('myClass');
const firstElement = elements[0];문서 객체 조작하기
1. 스타일 변경
DOM 요소의 스타일 변경으로 동적인 시각 효과 생성. style 속성이나 classList를 사용해 스타일 조작
const element = document.querySelector('#myElement');
element.style.backgroundColor = 'blue';
element.style.fontSize = '20px';2. 속성 추가, 삭제 및 변경
DOM 요소의 속성 조작으로 동적인 기능 구현
// 속성 추가
const img = document.querySelector('img');
img.setAttribute('alt', '풍경 이미지');
// 속성 변경
img.setAttribute('src', 'new-image.jpg');
// 속성 가져오기
const altText = img.getAttribute('alt');
console.log(altText); // '풍경 이미지' 출력
const classValue = img.getAttribute('class');
console.log(classValue); // 클래스 값 출력 또는 null
// 속성 삭제
img.removeAttribute('title');
// 속성 존재 여부 확인
if (img.hasAttribute('src')) {
console.log('src 속성 존재');
}속성 조작 메서드 요약
- setAttribute(속성명, 속성값): 속성 추가 및 변경
- getAttribute(): 특정 속성 값 가져오기
- removeAttribute(): 특정 속성 제거
속성 조작 메서드는 기존 속성 값을 초기화할 수 있음. 예, 'setAttribute()'로 class 설정 시 기존 클래스 덮어씌워짐. 반면
'classList'메서드들은 기존 클래스 유지하며 특정 클래스만 추가나 제거 가능해 더 유연함
✅ class 속성 제어 메서드
- classList.add(): 클래스 추가 ⭐️
- classList.remove(): 클래스 제거 ⭐️
- classList.toggle(): 클래스 추가/제거 토글 ⭐️
- classList.contains(): 특정 클래스 포함 여부 확인 (true/false)
const element = document.querySelector('#myElement');
element.classList.add('highlight');
element.classList.remove('hidden');
element.classList.toggle('active');콘텐츠 조작
- innerText: 요소의 보이는 텍스트만 조작
- textContent: 모든 텍스트 콘텐츠 조작 (숨겨진 텍스트 포함) ⭐️
- innerHTML: 요소 내부의 HTML 콘텐츠 조작
- outerHTML: 요소 자체와 그 내부 HTML 포함하여 조작
const container = document.getElementById("container");
container.textContent = "새 텍스트 콘텐츠";
container.innerHTML = "<h1>HTML 콘텐츠</h1>";⚠️ 주의: innerHTML은 XSS 공격에 취약할 수 있으며, textContent가 더 안전함
새로운 문서 객체 추가
새로운 문서 객체는 createElement()로 생성하고 appendChild() 또는 insertBefore()를 통해 추가함
createElement() + appendChild()
- appendChild()는 항상 부모 요소의 마지막 자식으로만 요소 추가
// 새 div 요소 생성
const newDiv = document.createElement('div');
// 텍스트 노드 생성
const newContent = document.createTextNode('안녕하세요!');
// 새 div에 텍스트 노드 추가
newDiv.appendChild(newContent);
// 기존 DOM에 새 div 추가
document.body.appendChild(newDiv);createElement() + insertBefore()
insertBefore()는 특정 노드 앞에 삽입할 때 유용함
이 메서드는 부모 노드에서 호출되며, 두 개의 매개변수를 받음: 첫 번째는 삽입할 새 노드이고, 두 번째는 기준이 되는 노드임 예:
// 새 요소 생성
const newElement = document.createElement('div');
newElement.textContent = '새로운 요소';
// 부모 요소 선택
const parentElement = document.getElementById('parent');
// 기준 요소 선택 (이 요소 앞에 새 요소가 삽입됨)
const referenceElement = document.getElementById('existing');
// 새 요소를 기준 요소 앞에 삽입
parentElement.insertBefore(newElement, referenceElement);기존 문서 객체 삭제
removeChild()
부모 노드에서 호출, 삭제할 자식 노드를 매개변수로 받음
// 삭제할 요소 선택
const elementToRemove = document.getElementById('oldElement');
// 부모 요소에서 자식 요소 삭제
elementToRemove.parentNode.removeChild(elementToRemove);remove() ⭐️
요소 자체에서 직접 호출, 최근에는 더 간단한 remove() 메서드 사용이 일반적
// 삭제할 요소 선택
const elementToRemove = document.getElementById('oldElement');
// 요소 직접 삭제
elementToRemove.remove();노드 관계 속성
DOM 트리 내 노드 간의 관계 탐색 가능
- parentNode: 부모 노드
- childNodes: 모든 자식 노드를 NodeList로 반환
- firstChild: 첫 번째 자식 노드
- lastChild: 마지막 자식 노드
- nextSibling: 다음 형제 노드
- previousSibling: 이전 형제 노드
// DOM 노드 관계 속성 예시
const element = document.getElementById('myElement'); // 특정 요소 선택
const parent = element.parentNode; // 부모 노드 가져오기
const firstChild = element.firstChild; // 첫 번째 자식 노드 가져오기
const nextSibling = element.nextSibling; // 다음 형제 노드 가져오기이 속성들은 DOM 트리를 유연하게 탐색하는 데 매우 유용하며, 문서 구조를 동적으로 변경할 때 활용됨
출처: 수코딩
