DOM(Document Object Model)
DOM(Document Object Model)은 웹 페이지의 구조를 표현하고 웹 페이지 요소에 접근하고 조작하는 데 사용되는 프로그래밍 인터페이스이다.
DOM은 웹 페이지가 로드될 때 생성되며, 브라우저는 웹 페이지의 HTML 문서를 파싱하여 DOM 트리를 생성하는데 이렇게 생성된 DOM 트리는 자바스크립트와 같은 스크립트 언어를 사용하여 웹 페이지의 요소에 접근하고 조작할 수 있는 API를 제공해준다.
이러한 DOM은 웹 브라우저에서 HTML, XML 또는 XHTML 문서를 표현하는 트리 형태의 객체 구조로 변환하고 이 구조는 웹 페이지의 각 요소를 노드로 표현하며, 노드는 다른 노드와의 계층 구조로 연결된다.
노드(Node)
DOM의 기본 단위로 웹 페이지의 모든 구성 요소를 나타내고 각 요소는 노드로 표현되며, 노드는 트리 구조에서 계층적으로 연결된다. 주요 노드 유형은 요소 노드, 텍스트 노드, 속성 노드, 주석 노드가 존재한다.
요소 노드(Element Node)
HTML 요소를 나타내며. 예를 들어,div,p,a 등의 태그가 요소 노드에 해당한다.
텍스트 노드(Text Node)
HTML 문서 내의 텍스트를 나타내며 태그 사이에 있는 문자코드를 텍스트 노드라고 할 수 있다.
속성 노드(Attribute Node)
HTML 요소의 속성을 나타내며 예를 들어, 태그 사이에 있는 src="image.jpg"에서 src가 속성 노드라고 할 수 있다.
주석 노드(Comment Node)
HTML 문서 내의 주석을 말한다.
요소(Element):
HTML 문서의 구성 요소를 나타내며, DOM에서는 각 요소가 요소 노드로 표현되고 요소는 태그로 표현되며, 태그 이름, 속성, 내부 텍스트 등을 포함한다. 예를 들어, <div id="container">Some text</div>는 <div> 요소를 나타내며, "container"라는 아이디 속성과 "Some text"라는 내부 텍스트를 가지고 있다.
속성(Attribute):
HTML 요소의 추가 정보를 나타내는 특성을 의미하며 각 요소는 속성을 가질 수 있고 속성은 속성 노드로 표현된다. 속성은 일반적으로 요소의 외부 특성이나 구성을 지정한다. 예를 들어, <img src="image.jpg">에서 "src"는 이미지 파일의 경로를 지정하는 속성이다.
선택자(Selector):
DOM에서 원하는 요소를 선택하기 위해 사용되는 패턴 또는 표현식이다. 선택자는 요소의 태그 이름, 클래스, 아이디, 속성 등을 기반으로 요소를 선택할 수 있으며 선택자를 사용하여 웹 페이지의 특정 요소에 접근하고 조작할 수 있다. 자바스크립트 같은 경우엔 querySelector 및 querySelectorAll 메서드를 사용하여 CSS 선택자를 지정하여 요소를 선택할 수 있다.
이렇게 DOM을 사용하면 자바스크립트를 통해 웹 페이지의 요소를 동적으로 선택, 생성, 수정, 삭제할 수 있으며 이벤트 처리와 같은 상호작용 기능을 구현할 수 있다. 이는 웹 애플리케이션 개발에 큰 도움을 준다.
