HTLM DOM의 뜻과 구성
DOM이란?
DOM은 Document Object Model의 줄임말로, W3C에서 정의한 웹기술 표준 standard 중 하나입니다.
W3C DOM 표준은 다음의 세 파트로 나뉘어져 있습니다.
- Core DOM - 모든 문서 타입을 위한 표준 모델
- XML DOM - XML 문서를 위한 표준 모델
- HTML DOM - HTLM 문서를 위한 표준 모델
웹페이지가 브라우저에 표시될 때, 화면에 나타나는 웹페이지가 바로 HTML DOM입니다.
돔 DOM은 자바스크립트 같은 프로그래밍 언어가 웹페이지에 접근하여 웹문서 내용이나 구조를 변경하고 수정할 수 있도록 하기위해서 만들어졌습니다.
즉, 프로그래밍 언어들이 웹페이지에 접근 가능하도록 어떤 방식으로 웹문서를 체계화하고 구조화할 것인지에 대한 기술적인 기준이 바로 돔 DOM 입니다.
참고 > https://www.w3schools.com/js/js_htmldom.asp
HTML DOM 구성과 특징
1. Node로 구성
HTML 돔은 Node 노드들로 구성됩니다. 그리고 HTML 돔을 구성하는 노드에는 엘리먼트 Element, 어트리뷰트 Attribute, 텍스트 Text 등이 있습니다.
| HTML Document | ||
| Element 노드 | Attribute 노드 | 기타 노드 |
| html 요소들 | html 요소의 속성들 | 텍스트 |
| head, body, h1, a 등의 html 태그들 | herf 등의 html 속성들 | html 태그 안에 들어있는 텍스트 |
자바스크립트를 이용해 다음과 같이 HTML 돔을 변경하거나 수정할 수 있습니다.
- 웹페이지의 모든 elment를 변경할 수 있습니다.
- 웹페이지의 모든 attribute를 변경할 수 있습니다.
- 웹페이지의 모든 CSS 스타일을 변경할 수 있습니다.
- 웹페이지에 존재하는 elment나 attribute를 삭제할 수 있습니다.
- 웹페이지에 새로운 element나 attribute를 추가할 수 있습니다.
- 웹페이지에 존재하는 모든 이벤트에 반응할 수 있습니다.
- 웹페이지에 새로운 이벤트를 만들 수 있습니다.
2. Propery vs Method
HTML 돔을 구성하는 모든 엘리먼트들은 object입니다. 따라서, 오브젝트의 속성인 프로퍼티 property와 메서드 method를 가집니다.
HTML DOM Property
프로퍼티는 HTML 엘리먼트의 내용들을 설정한 값 value들 입니다.
HTML DOM Method
메서드는 HTML에 엘리먼트를 추가하거나 삭제하는 등의 동작 action입니다. 즉, 메서드는 돔이라는 오브젝트에 미리 정의되어 있는 함수들입니다.
메서드 예 : getElementById
| 구분 | Property | Method |
| 특징 | 값 values | 동작 actions |
| 예 | innerHTML | getElementById |