-
DOM이란?프로그래밍 기초 공부 2022. 11. 16. 23:54
[ 브라우저의 렌더링 과정 ]
파싱
- 텍스트 문서의 문자열을 토큰으로 분해하고,
토큰에 문법적 의미와 구조를 반영하여 parse Tree 를 생성하는 일련의 과정
- 소스코드 자체는 텍스트 문서에 불과함
- 파싱이라는 과정을 거쳐서 문법적인 의미를 부여해야 컴퓨터가 언어를 해석할 수 있음
렌더링
- HTML, CSS, JS로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것
- 주소창에 url을 입력하면, 브라우저는 HTML, CSS, Javascript 등 렌더링에 필요한 리소스들을 서버에 요청
- 서버로부터 받은 리소스들을 통해 렌더링을 하는데, HTML, CSS, JavaScript 소스들은 텍스트에 불과하기 때문에 파싱을 통해 브라우저가 이해할 수 있는 자료구조 형태로 만들어야함
- HTML이 파싱을 거치면 DOM tree
- CSS가 파싱을 거치면 CSSOM tree
- JavaScript가 파싱을 거치면 AST(Abstract Syntax Tree)
[ DOM ]
- Document Object Model의 약자
- HTML, XML 문서의 프로그래밍 interface
- 기본적으로 여러 프로그램들이 페이지의 콘텐츠 및 구조, 그리고 스타일을 읽고 조작할 수 있도록 API를 제공
- DOM 은 nodes와 objects로 문서를 표현
- DOM은 자바스크립트를 통해 동적으로 변경할 수 있으며 변경된 DOM은 렌더링에 반영
- 모든 요소와 요소의 어트리뷰트, 텍스트를 각각의 객체로 만들고 이들 객체를 부자 관계를 표현할 수 있는 트리 구조로 구성한 것
[ DOM 특징 ]
- DOM은 HTML이 아님
- DOM은 HTML 문서로부터 생성되지만 항상 동일하지 않음
- DOM은 브라우저에서 보이는 것이 아님
- 브라우저 뷰 포트에 보이는 것은 렌더 트리로 DOM과 CSSOM의 조합
- 렌더 트리는 오직 스크린에 그려지는 것으로 구성되어 있어 DOM과 다름
- DOM은 개발도구에서 보이는 것이 아님
- 개발도구의 요소 검사기는 DOM과 가장 가까운 근사치를 제공
- 그러나 개발도구의 요소 검사기는 DOM에 없는 추가적인 정보를 포함합니다.
- ex) CSS의 가상 요소
- ::before 과 ::after 선택자를 사용하여 생성된 가상 요소는 CSSOM과 렌더 트리의 일부를 구성
하지만, 기술적으로 DOM의 일부는 아님. - DOM은 오직 원본 HTML 문서로부터 빌드 되고, 요소에 적용되는 스타일을 포함하지 않기 때문
- ::before 과 ::after 선택자를 사용하여 생성된 가상 요소는 CSSOM과 렌더 트리의 일부를 구성
- ex) CSS의 가상 요소
[ DOM과 HTML의 차이점 ]
DOM은 HTML 문서로부터 생성이 되지만 항상 동일하지 않음
- HTML : 화면에 보이고자 하는 모양과 구조를 문서로 만든 것으로 단순 텍스트로 구성
- 최초에 화면을 그릴때 사용하는 설계도
- DOM : HTML 문서의 내용과 구조가 객체 모델로 변화되어 다양한 프로그램에서 사용될 수 있음
- 설계도를 이용하여 실제로 화면에 나타내지는 인터페이스
[ DOM API ]
- 웹 문서의 동적 변경을 위해 DOM은 프로그래밍 언어가 자신에 접근하고 수정할 수 있는 방법을 일반적으로 프로퍼티와 메소드를 갖는 자바스크립트 객체로 제공
- 정적인 웹페이지에 접근하여 동적으로 웹페이지를 변경하기 위해 메모리 상에 존재하는 DOM을 변경하는 것
- 이때 필요한 것이 DOM에 접근하고 변경하는 프로퍼티와 메소드의 집합인 DOM API
[ DOM tree ]
- 브라우저가 HTML 문서를 로드한 후 파싱하여 생성하는 모델
- 객체의 트리로 구조화되어 있기 때문에 DOM tree
- DOM에서 모든 요소, 어트리뷰트, 텍스트는 하나의 객체이며 Document 객체의 자식
- 요소의 중첩관계는 객체의 트리로 구조화하여 부자관계를 표현
- DOM tree의 진입점은 document 객체이며 최종점은 요소의 텍스트를 나타내는 객체
<!DOCTYPE html> <html> <head> <style> .red { color: #ff0000; } .blue { color: #0000ff; } </style> </head> <body> <div> <h1>Cities</h1> <ul> <li id="one" class="red">Seoul</li> <li id="two" class="red">London</li> <li id="three" class="red">Newyork</li> <li id="four">Tokyo</li> </ul> </div> </body> </html>
[ DOM tree의 네 종류의 노드 ]
문서 노드(Document Node)
- 트리의 최상위에 존재하며 각각 요소, 어트리뷰트, 텍스트 노드에 접근하려면 문서 노드를 통해야 함
- 즉, DOM tree에 접근하기 위한 시작점
요소 노드(Element Node)
- 요소 노드는 HTML 요소를 표현
- HTML 요소는 중첩에 의해 부자 관계를 가지며 이 부자 관계를 통해 정보를 구조화함
- 따라서 요소 노드는 문서의 구조를 서술한다고 말 할 수 있음
- 어트리뷰트, 텍스트 노드에 접근하려면 먼저 요소 노드를 찾아 접근해야 함
- 모든 요소 노드는 요소별 특성을 표현하기 위해 HTMLElement 객체를 상속한 객체로 구성됨
어트리뷰트 노드(Attribute Node)
- 어트리뷰트 노드는 HTML 요소의 어트리뷰트를 표현
- 어트리뷰트 노드는 해당 어트리뷰트가 지정된 요소의 자식이 아니라 해당 요소의 일부로 표현
- 따라서 해당 요소 노드를 찾아 접근하면 어트리뷰트를 참조, 수정할 수 있음
텍스트 노드(Text Node)
- 텍스트 노드는 HTML 요소의 텍스트를 표현
- 텍스트 노드는 요소 노드의 자식이며 자신의 자식 노드를 가질 수 없음
- 즉, 텍스트 노드는 DOM tree의 최종단
DOM을 통해 웹페이지를 조작(manipulate)하기 위해서는 다음과 같은 수순이 필
- 조작하고자하는 요소를 선택 또는 탐색
- 선택된 요소의 콘텐츠 또는 어트리뷰트를 조작
자바스크립트는 이것에 필요한 API를 제공
'프로그래밍 기초 공부' 카테고리의 다른 글
WAR, JAR 이란? (0) 2022.11.17 정적페이지와 동적페이지란? (0) 2022.11.17 GraphQL이란? (1) 2022.11.14 CI / CD 란? (1) 2022.11.11 OAuth란? (0) 2022.11.10 - 텍스트 문서의 문자열을 토큰으로 분해하고,