DOM구조

Jan 17, 2024 • bamjun

DOM (Document Object Model)은 HTML과 XML 문서를 위한 프로그래밍 인터페이스입니다. DOM은 문서의 구조화된 표현을 제공하며, 프로그래밍 언어가 문서 구조, 스타일 및 내용을 읽고 조작할 수 있게 합니다. DOM은 문서를 노드와 객체의 트리로 나타냅니다. 이 트리 구조는 문서의 구조를 반영합니다.

DOM의 주요 구성 요소

노드(Node):
- 모든 것이 노드입니다. DOM에서는 HTML 및 XML 문서의 각 부분을 노드라고 부릅니다.
- 다양한 유형의 노드가 있습니다: 요소 노드(Element Node), 텍스트 노드(Text Node), 속성 노드(Attribute Node) 등.
요소 노드(Element Node):
- HTML 또는 XML 태그에 해당합니다. 예를 들어, <div>, ,  등이 있습니다.
- 요소 노드는 트리의 가지(branch)처럼 작용하여 다른 요소(자식 노드)를 포함할 수 있습니다.
속성 노드(Attribute Node):
- 요소의 속성을 나타냅니다. 예를 들어, <img src="image.jpg">에서 src="image.jpg"가 속성 노드입니다.
- 속성 노드는 해당 요소 노드에 직접 연결됩니다.
텍스트 노드(Text Node):
- HTML 문서의 텍스트를 나타냅니다. 예를 들어, Hello World에서 “Hello World”가 텍스트 노드입니다.
루트 노드(Root Node):
- 문서의 최상위 노드입니다. HTML 문서에서는 <html> 태그가 루트 노드가 됩니다.

DOM 작동 방식

트리 구조:
- DOM은 문서를 트리 구조로 표현합니다. 이 트리는 노드들로 구성되며, 각 노드는 다른 노드와 관계를 맺습니다(부모, 자식, 형제).
조작 및 접근:
- JavaScript와 같은 스크립팅 언어를 사용하여 DOM을 동적으로 조작할 수 있습니다. 예를 들어, 요소를 추가, 제거, 수정할 수 있습니다.
- document.getElementById(), document.createElement(), parentNode.appendChild() 등의 메서드를 사용하여 DOM을 조작합니다.

DOM의 중요성

웹 페이지의 동적 변경:
- DOM을 통해 웹 페이지의 내용, 구조, 스타일을 프로그래밍적으로 변경할 수 있습니다. 이를 통해 동적인 웹 페이지와

애플리케이션을 만들 수 있습니다.

사용자 상호작용:
- 사용자의 입력과 상호작용에 반응하여 페이지의 내용을 변경할 수 있습니다. 예를 들어, 사용자가 버튼을 클릭하면 특정 요소가 화면에 추가되거나 변경될 수 있습니다.
브라우저 호환성과 독립성:
- DOM은 웹 표준의 일부이며, 모든 주요 브라우저에 의해 지원됩니다. 이로 인해 다양한 브라우저에서 일관된 방식으로 문서를 조작할 수 있습니다.
웹 애플리케이션 개발:
- 복잡한 웹 애플리케이션과 사용자 인터페이스를 구축하기 위한 기반이 됩니다. AJAX, React, Angular와 같은 현대적인 웹 기술과 프레임워크는 DOM 조작에 크게 의존합니다.

DOM 조작의 예

요소 추가하기: 새로운  태그를 생성하고, 그 안에 텍스트를 넣은 다음, 페이지의 특정 부분에 추가합니다.

var newParagraph = document.createElement("p");
newParagraph.textContent = "This is a new paragraph.";
document.body.appendChild(newParagraph);

요소 스타일 변경하기: 특정 요소의 스타일을 변경하여, 예를 들어, 색상이나 크기를 조정합니다.
```
var element = document.getElementById("myElement");
element.style.color = "blue";
element.style.fontSize = "20px";
```
이벤트 리스너 추가하기: 버튼에 클릭 이벤트 리스너를 추가하여, 사용자가 클릭할 때마다 함수가 실행되도록 합니다.
```
var button = document.getElementById("myButton");
button.addEventListener("click", function() {
  alert("Button clicked!");
});
```

DOM은 웹 개발의 필수적인 부분으로, 웹 페이지를 동적이고 상호작용적으로 만드는 데 핵심적인 역할을 합니다.

Share on:

서버리스 아키텍처

정규 표현식(regular expression)