자바스크립트 - 문서 객체 모델 (DOM)
DOM이란?
문서 객체 모델, 일반적으로 DOM으로 알려져 있으며, HTML과 XML 문서를 위한 프로그래밍 인터페이스입니다. DOM은 문서의 구조를 트리와 같은 계층 구조의 객체로 표현하며, 각 객체는 문서의 일부에 해당하는 요소, 속성 또는 텍스트 노드와 같은 것입니다.
이미지를 통해 상상해 보세요. 레고 블록으로 집을 짓고 있다면, DOM은 마법의 설계도처럼 문서의 구조를 보여주고, 자바스크립트를 사용하여 블록을 조작하고 재배치할 수 있게 해줍니다. 이는 웹 페이지와 프로그래밍 언어 사이의 경계를 연결하는 강력한 도구입니다.
DOM의 주요 개념
- 노드: 문서의 모든 부분은 노드입니다. 요소, 속성, 텍스트는 모두 다른 유형의 노드입니다.
-
트리 구조: DOM은 문서를 트리로 표현하며, 루트는
document객체입니다. - 탐색: 다양한 메서드와 속성을 사용하여 DOM 트리를 탐색할 수 있습니다.
- 조작: DOM은 문서의 구조, 스타일 및 내용을 동적으로 변경할 수 있습니다.
이 개념들을 단순한 예제를 통해 설명해 보겠습니다:
<!DOCTYPE html>
<html>
<head>
<title>첫 번째 DOM 예제</title>
</head>
<body>
<h1 id="mainHeading">DOM에 오신 것을 환영합니다</h1>
<p>이것은 문단입니다.</p>
</body>
</html>이 HTML 문서에서 DOM 트리는 다음과 같이 보일 것입니다:
document
└── html
├── head
│ └── title
│ └── "첫 번째 DOM 예제"
└── body
├── h1
│ └── "DOM에 오신 것을 환영합니다"
└── p
└── "이것은 문단입니다."HTML DOM이란?
HTML DOM은 HTML을 위한 표준 객체 모델 및 프로그래밍 인터페이스입니다. 다음을 정의합니다:
- HTML 요소를 객체로
- 모든 HTML 요소의 속성
- 모든 HTML 요소에 접근할 수 있는 메서드
- 모든 HTML 요소의 이벤트
본질적으로, HTML DOM은 HTML 요소를 얻고, 변경하고, 추가하거나 삭제하는 방법에 대한 표준입니다.
HTML DOM을 사용하는 방법
HTML DOM의 일반적인 연산을 탐구해 보겠습니다:
- 요소 접근
// ID를 사용하여 요소를 얻음
const heading = document.getElementById('mainHeading');
// 태그 이름을 사용하여 요소를 얻음
const paragraphs = document.getElementsByTagName('p');
// 클래스 이름을 사용하여 요소를 얻음
const highlights = document.getElementsByClassName('highlight');
// querySelector를 사용하여 더 복잡한 선택
const firstParagraph = document.querySelector('p');이 예제에서 우리는 HTML 문서에서 요소를 선택하는 다양한 방법을 사용하고 있습니다. 마법의 지팡이를 사용하여 웹 페이지의 특정 부분을 가리키는 것과 같습니다!
- 내용 변경
// 요소의 텍스트 내용을 변경
heading.textContent = 'DOM의 훌륭한 세계에 오신 것을 환영합니다!';
// 요소의 HTML 내용을 변경
paragraphs[0].innerHTML = '이 문단은 <strong>수정되었습니다</strong>!';여기서 우리는 요소의 내용을 업데이트하고 있습니다. 마치 웹 페이지의 일부를 지우고 다시 쓰는 것과 같습니다!
- 스타일 수정
// 요소의 스타일을 변경
heading.style.color = 'blue';
heading.style.fontSize = '24px';이 코드를 사용하여 우리는 заголовок의 색상과 크기를 변경하고 있습니다. 마치 웹 요소에 패션 디자이너를 고용한 것과 같습니다!
- 요소 생성 및 제거
// 새로운 요소를 생성
const newParagraph = document.createElement('p');
newParagraph.textContent = '이것은 새로 만들어진 문단입니다.';
// 새로운 요소를 문서에 추가
document.body.appendChild(newParagraph);
// 요소를 제거
document.body.removeChild(paragraphs[0]);이 예제에서 우리는 웹 페이지의 아키텍트 역할을 맡아 새로운 요소를 구축하고旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄旄
Credits: Image by storyset