DOM(document object model)

HTML문서의 태그들은 DOM에서 트리로 표현되는 계층적 구조를 갖는다.

1. DOM(Document Object Model)

• 문서 객체 모델(DOM : Document Object Model)
  (문서 객체란 html이나 body같은 html문서의 태그들을 JavaScript가 이용할 수 있는 객체(object)로 만들면 그것을 문서 객체)
• XML이나 HTML 문서에 접근하기 위한 인터페이스, 문서 내의 모든 요소를 정의하고 각각의 요소에 접근하는 방법을 제공
  (인터페이스 : 상호 간의 소통을 위해 만들어진 물리적 매개체나 프로토콜)
• 자바 스크립트에서 HTML을 접근하기 위해서는 DOM을 사용
  -넓은 의미로 웹 브라우저가 HTML 페이지를 인식하는 방식

2.DOM의 종류

W3C DOM 표준은 다음의 세 가지 모델로 구분된다.

• W3C : World Wide Web Consortium

1. Core DOM : 모든 문서 타입을 위한 DOM 모델

2. HTML DOM : HTML 문서를 위한 DOM 모델

3. XML DOM : XML 문서를 위한 DOM 모델

2-1. HTML이란?

Hypertext Markup Language

2-2. XML이란?

eXtensible Markup Language = 확장 가능한 표시 언어

Markup Language의 다른 예로는 우리가 아는 언어인 HTML이 있다.

3. HTML vs XML

HTML은 이미 약속되어있는 태그만 사용이 가능하다.

반면, XML은 이름 그대로 '확장 가능하다'는 차이점이 있다.

XML의 태그는 사용자가 임의로 만들어 사용할 수 있다.

XML은 어떠한 데이터를 설명하기 위해 임의로 만든 태그로 해당 데이터를 감싼다.

즉, 태그를 통해 데이터를 설명하는 것이다.

XML의 특징

1. 다목적 마크업 언어이다.

2. 다른 시스템끼리 다양한 종류의 데이터를 솝쉽게 교환할 수 있도록 해준다.

3. 새로운 태그를 만들어 추가해도 계속해서 동작하므로, 확장성이 좋다.

4. 데이터를 전달하고 저장하는 것만을 목적으로 한다.

5. 텍스트 데이터 형식의 언어로, 모든 XML 문서는 유니코드* 문자로만 이루어진다.

* 유니코드 : 숫자와 글자, 즉 키와 값이 1:1로 매핑된 형태의 코드

4. DOM vs html

DOM은 원본 HTML의 객체 기반 표현 방식이다. 둘은 서로 비슷하지만, DOM이 갖고 있는 근본적인 차이는 단순 텍스트로 구성된 HTML의 내용과 구조가 객체 모델로 변환되어 다양한 프로그램에서 사용될 수 있다는 점이다.

5. JavaScript & DOM

JavaScript는 DOM을 이용하여 다음과 같은 작업을 할 수 있다.

1. 새로운 HTML 요소나 속성을 추가할 수 있다.

2. 존재하는 HTML 요소나 속성을 제거할 수 있다.

3. HTML 문서의 모든 HTML 요소를 변경할 수 있다.

4. HTML 문서의 모든 HTML 속성을 변경할 수 있다.

5. HTML 문서의 모든 CSS 스타일을 변경할 수 있다.

6. HTML 문서에 새로운 HTML 이벤트를 추가할 수 있다.

7. HTML 문서의 모든 HTML 이벤트에 반응할 수 있다.

참고:https://dololak.tistory.com/358