문서 객체 모델 DOM(The Document Object Model)
DOM은 HTML, XML 문서의 프로그래밍 interface 이다.
DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.
DOM 은 nodes와 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.
웹 페이지를 수정하거나 생성하는데 사용되는 모든 property, method, event 들은 objects 로 구성된다.브라우저가 HTML 웹 페이지를 인식하는 방식을 계층화시켜 트리구조로 만든 객체(Object) 모델
💥DOM 에 어떻게 접근할 수 있는가?💥
문서 자체를 조작하거나 문서의 children 을 얻기 위해 document 또는 window elements 를 위한 API 를 즉시 사용할 수 있다. DOM 프로그래밍은 아래처럼 window object 로 부터 alert() (en-US) 함수를 사용하여 alert message 를 표시하는 매우 간단한 것일 수도 있고 다음번 예제처럼 새로운 content 를 작성하는 복잡한 DOM 이 될 수도 있다.
<body onload="window.alert('welcome to my home page!');">아래의 자바스크립트는 문서가 로드될 때(모든 DOM을 사용할 수 있게 되는 때임) 실행되는 함수를 정의하였다. 이 함수는 새로운 H1 element 를 생성하고, element 에 text 를 추가하며, H1 을 이 문서의 트리에 추가한다.
<html> <head> <script> // 문서가 로드 되면 함수 실행 window.onload = function() { //h1태그를 생성하고"Big Head!"텍스트를 h1태그에 추가 하고 그 이후에 body태그에 추가 var heading = document.createElement("h1"); var heading_text = document.createTextNode("Big Head!"); heading.appendChild(heading_text); document.body.appendChild(heading); } </script> </head> <body> </body> </html>
DOM을 선택 하는 방법
1.Document.getElementById(태그의 id) 2.Document.getElementsByClassName(태그의 class이름) 3.Document.getElementsByTagName(태그이름) 4.Document.querySelector('css선택자') 5.Document.querySelectorAll('css선택자')
DOM 중요한 데이터 타입들
| 타입명 | 내용 |
|---|---|
| document | Document 인터페이스는 브라우저가 불러온 웹 페이지를 나타내며, 페이지 콘텐츠(DOM 트리)의 진입점 역할을 수행합니다. DOM 트리는 body태그와 여러 다른 요소를 포함 |
| element | element 는 DOM API 의 member 에 의해 return 된 element 또는 element type 의 node 를 의미한다. document.createElement() method 가 node 를 참조하는 object 를 리턴한다고 말하는 대신, 이 method 가 DOM 안에서 생생되는 element 를 리턴한다고 좀 더 단순하게 말할 수 있다. |
| nodeList | nodeList 는 elements 의 배열이다. (document.getElementsByTagName() method 에 의해 리턴된 것과 같은) nodeList의 Items 은 index 를 통해 접근 가능하며, 다음과 같이 두 가지 방식이 있다 ➡ list.item(1) ➡ list[1] |
| attribute | attribute 가 member 에 의해 리턴되는 것은(예를 들어 createAttribute() method 호출에 의한 리턴), attribute 에 대한 특별한 인터페이스를 노출하는 object reference 이다. attributes 는 DOM 에서 elements 와 같은 nodes 이다. elements 만큼 많이 사용되지는 않는다. |
| namedNodeMap | namedNodeMap 는 array 와 유사하지만 items 은 name 또는 index 에 의해 접근 가능하다. 리스트는 특별한 정렬이 적용되지 않았기 enumeration 할 때 index 를 주로 사용한다. namedNodeMap 는 이를 위해 item() method 가 있으며, namedNodeMap 에 item 을 추가하거나 삭제할 수 있다. |
웹 페이지가 만들어지는 방법
먼저 DOM을 이해하기 위해서는 웹 페이지의 빌드과정을 알아야 합니다.
CRP(Critical Rendering Path)
브라우저가 서버에서 페이지에 대한 HTML 응답을 받으며 화면에 표시되기 전에 많은 단계를 거쳐야 하는데 웹 브라우저가 원본 HTML 문서를 읽어들인 후, 스타일을 입히고 대화형 페이지로 만들어 뷰포트에 표시하기까지의 과정을 'Critical Rendering Path, CRP'이라고 합니다.CRP의 6단계 과정
- DOM 트리 구축
- CSSOM(css객체모델) 트리 구축
- JavaScript 실행
- 렌더 트리 구축
- 레이아웃 생성
- 페인팅
위와 같이 CRP 과정은 6단계로 나누어져 있지만 대략 렌더 트리 구축을 기점으로 두 단계로 나눌 수 있습니다.
첫번째 단계 : 브라우저는 읽어들인 문서를 파싱하여 최종적으로 어떤 내용을 페이지에 렌더링할 지 결정합니다. (이 단계를 거치면 렌더 트리가 생성이 됩니다.)
두번째 단계 : 브라우저는 해당 렌더링을 수행합니다.
DOM과 HTML의 차이점
DOM은 HTML 문서로부터 생성이 되지만 항상 동일하지 않습니다.
HTML : 화면에 보이고자 하는 모양과 구조를 문서로 만든 것으로 단순 텍스트로 구성되어 있습니다. (최초에 화면을 그릴때 사용하는 설계도)
DOM : HTML 문서의 내용과 구조가 객체 모델로 변화되어 다양한 프로그램에서 사용될 수 있습니다. (설계도를 이용하여 실제로 화면에 나타내지는 인터페이스)
결론
-
DOM은 HTML 문서에 대한 인터페이스 입니다.
-
DOM이 사용되는 곳은 뷰 포트에 무엇을 렌더링 할지 결정하기 위해 사용됩니다. 또한 페이지의 컨텐츠 및 구조, 그리고 스타일이 JavaScript 프로그램에 의해 수정되기 위해 사용됩니다.
-
DOM과 HTML의 차이점
-> DOM은 항상 유효한 HTML 형식입니다.
-> DOM은 JavaScript에 의해 수정될 수 있는 동적 모델이어야 합니다.
-> DOM은 가상 요소를 포함하지 않습니다. (Ex) ::after 등)
-> DOM은 보이지 않는 요소를 포함합니다. (Ex) display : none 등)
출처: MDN 공식문서 / UsefulToKnow 블로그 / Solmii 블로그
궁금했던 내용인데 좋은 글 감사합니다!