JavaScript_8강_1_★★★DOM(Document Object Model) 이론★★★

열라뽕따히·2024년 3월 11일

JavaScript

목록 보기

29/37

DOM(Document Object Model) : 문서 객체 모델

웹 문서에서 자바스크립트를 사용하는 가장 큰 이유는 어떤 조건에 맞거나 사용자 동작이 있을 때 웹 문서 전체 또는 일부분이 동적으로 반응하게 하기 위함.
이렇게 하려면 웹 문서에 담겨 있는 모든 요소를 따로 제어할 수 있어야 함.
예를 든다면 텍스트와 이미지 태그가 있을 때 '하나는 텍스트 단락이 있고 내용은 무엇이다.', '하나의 이미지가 있고 이미지의 크기와 경로는 이렇다' 등을 웹 브라우저에서 기본적으로 알고 있어야 함. 그리고 텍스트 요소와 이미지 요소를 각각 제어하기 위해 따로 구별해서 인식해야 함.
여러 개의 요소를 사용한 웹 문서라면 요소 사이의 포함 관계도 알고 있어야 함.
이런 정보를 자바스크립트로 가져와서 프로그램에 사용해야 하는데 이 때 DOM이 등장함.
DOM은 자바스크립트 같은 프로그래밍 언어로 웹 문서에 접근하고 제어할 수 있도록 웹 문서를 체계적으로 정리하는 방법을 말함.
자바스크립트를 이용하여 웹 문서의 텍스트나 이미지 등의 요소를 제어하기 위해서는 문서 객체 모델(DOM)을 이해해야 함.
사전적 정의를 검색하면 DOM은 객체지향 모델로 구조화된 문서를 표현하는 형식임.
웹문서의 모든 요소를 자바스크립트를 이용하여 조작할 수 있도록 객체를 사용해 문서를 해석하는 방법을 말함.
텍스트 파일로 만들어져 있는 웹 문서를 브라우저에 렌더링하려면 웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야 함. 쉽게 말을 한다면 어떤 이미지를 올린다고 했을 때 body 내부에 img 태그를 넣어서 src 경로를 붙여 넣어야 브라우저가 인식을 제대로 한다는 것임. 제멋대로 태그들의 순서를 바꾸어 코드를 작성하면 브라우저가 그 코드를 인식을 하지 못함.
여기서 브라우저가 웹 문서를 이해할 수 있도록 구성된 것을 DOM이라고 함.
즉, 모든 요소들과의 관계를 부자관계로 표현할 수 있는 트리구조로 구성된 것이 DOM 이라는 것임. 여기서 서버로부터 HTML 파일을 받아 브라우저에 뿌려주는 과정을 말함.
이 DOM은 자바스크립트를 통해서 동적으로 변경을 할 수 있음.
웹 화면에 보이는 요소를 조작하기 위한 기능으로 가득찬 라이브러리 덩어리.
DOM은 웹 페이지가 HTML 페이지를 인식하는 방식을 말함.
웹 브라우저가 HTML 페이지에 접근하는 방법을 정의한 API임.
DOM에서 제공하는 일반적인 기능을 여러 개의 DOM 객체로 나누어 구성하고 있음.
DOM은 정의부분(명세서)과 구현부분으로 나뉘어져 있음.
정의부분인 명세서에는 웹 페이지 문서를 조작할 때 지켜야 할 약속(규칙, 규약)이 명시되어 있는 문서일 뿐 실제 동작 하는 구현 소스 코드는 전혀 존재하지 않음. 텅 빈 상자와도 같음. 이 명세서를 만드는 곳이 바로 웹 관련 표준을 정의하는 협회인 W3C임. 구현 부분은 바로 웹 브라우저 내부에 존재함.
브라우저 제작사(IE, Chrome, FireFox, Safari 등등)는 DOM에 명시되어 있는 인터페이스에 맞춰 자신들만의 특화된 고유 기술을 이용해 독자적으로 기능을 구현함.
눈에 보이지는 않지만 사실 브라우저에 출력된 웹 페이지는 온통 DOM 객체로 구성되어 있음.
자바스크립트 코드에서는 동적인 HTML을 만들어내기 위해 DOM 객체에 접근하여 조작을 하게 됨.
문서 객체 : 자바스크립트에서 이용할 수 있는 객체.

노드 : - HTML 웹 페이지 구성 요소의 가장 작은 단위를 말함.

문서를 이루는 모든 요소를 통합해서 부르는 용어. 즉, HTML 페이지의 각 요소(태그)들, 주석도 노드에 속함.
브라우저는 이런 노드로 가득찬 웹 페이지를 읽어들여 해석을 한 후, 각 노드에 접근하여 제어할 수 있는 DOM 객체를 생성함.

요소(element) : <시작태그> 텍스트 </끝태그>
텍스트 노드 : 요소 안에 있는 글자. innerHTML과 관계가 있음.

노드, 수타일, 속성, 이벤트, 위치 및 크기들을 다룰 수 있는 다양한 기능이 포함되어 있음.
보통 DOM 방식은 트리 구조임. 브라우저가 웹 페이지를 처리하는 과정을 살펴보면 먼저 브라우저는 문서 정보에 쉽게 접근하고 조작하고자 HTML 웹 페이지를 읽은 후 파싱 단계를 거침. 이 후 DOM 객체로 변환(트리구조) 후 화면에 출력을 함.
예를 들어 웹 페이지에 태그 노드가 있다면 브라우저에 의해 HTMLImageElement라는 DOM 객체가 생성이 됨. 이 객체는 다른 DOM 객체와는 다르게 이미지를 읽어들이는 특별한 기능이 있어서 실행 시에 "test.jpg" 라는 외부 이미지 파일을 읽어 들이게 됨.
즉, 문서 상의 노드는 "브라우저이군. 이 노드를 보고 알맞은 DOM 객체를 생성해 주세요" 라는 의미일 뿐, 모든 작업은 이제 브라우저에서 만들어낸 DOM 객체로 처리를 하게 됨.
DOM 객체가 생성되는 순서를 자세히 살펴 보면, 웹 브라우저는 가장 먼저 최상위에 해당하는 HTMLDocument 클래스의 객체를 생성함. 이후에 생성되는 모든 DOM 객체는 HTMLDocument 객체의 자식 객체로 만들어짐.

브라우저가 웹 페이지를 처리하는 과정

1. 웹 페이지 읽기

먼저 브라우저는 HTML 페이지를 읽음.

2. 파싱 단계

이어서 파싱(parsing) 단계를 거쳐서 웹 페이지 내용을 해석하게 됨. 이 때 작성한 마크업 태그와 1:1 매칭이 되는 DOM 클래스 객체를 생성하게 됨. 이렇게 생성된 객체는 저마다 고유한 기능을 하게 됨.
좀 더 자세하게 설명을 한다면 웹 브라우저가 HTML 페이지를 읽을 후 파싱 단계에서
태그를 만나게 되면 HTMLDivElement 라는 클래스의 인스턴스(객체)를 생성하게 되고, 태그를 만나면 HTMLImageElement 라는 클래스의 인스턴스를 생성하게 된다는 의미임.

3. 출력