자바스크립트의 DOM(Document Object Model)

안녕하세요

오늘은 자바스크립트의 기본 중에 기본인 DOM에 대해서 

포스팅 해보겠습니다.

 

DOM(Document Object Model)

DOM(Document Object Model) 은 웹 문서의 구조화된 표현입니다.

이것은 프로그래밍 언어가 웹 페이지 내의 객체에 접근하고 조작할 수 있게 하는 인터페이스로 동작합니다.

자바스크립트에서 웹페이지의 요소를 선택, 수정, 추가 또는 제거할 때 사용됩니다.

DOM의 주요 특징

1. 트리 구조 : DOM은 트리 구조로 표현되며, 각 노드는 웹페이지에서 문서, 요소, 속성, 텍스트, 주석 을 나타냅니다.

2. 라이브 특성 : DOM은 라이브라는 특성이 있습니다. DOM에 대한 변경은 즉시 웹페이지에 반영됩니다.

3. 조작 가능 : 자바스크립트를 사용하여 DOM 요소를 선택 수정 추가 제거 할수 있습니다.

 

DOM 관련 메서드 및 속성

요소 선택 

• document.getElementById(id) : 주어진 id 가진 요소를 반환시킵니다.
• document.getElementsByTagName(name) : 주어진 태그 이름을 가진 요소들의 목록을 반환합니다.
• document.getElementsByClassName(name) : 주어진 클래스 이름을 가진 요소들의 목록을 반환합니다.
• document.querySelector(selector) : 주어진 CSS 선택자와 일치하는 첫 번째 요소를 반환합니다.
• document.querySelectorAll(selector) : 주어진 CSS 선택자와 일치하는 모든 요소의 목록을 반환합니다.

요소 조작

• element.textContent 또는 element.innerText: 요소의 텍스트 내용을 가져오거나 설정한다.
• element.innerHTML: 요소의 내부 HTML을 가져오거나 설정한다.
• element.setAttribute(name, value): 요소의 속성 값을 설정한다.
• element.getAttribute(name): 요소의 속성 값을 가져온다.
• element.appendChild(childElement): 요소에 자식 요소를 추가한다.
• element.removeChild(childElement): 요소에서 자식 요소를 제거한다.

이벤트 리스너

• element.addEventListener(event, function): 요소에 이벤트 리스너를 추가함
• element.removeEventListener(event, function) : 요소에서 이벤트 리스너를 제거함

예시 )

let euijin = document.getElementById('euijin');

euijin.textcontent = 'euijin handsome';

euijin.addEventListener('onclick', function {
	alert('클릭 클릭!');
});

 

웹 페이지 빌드 과정(CRP)

CRP는 웹 브라우저가 HTML, CSS, JavaScript와 같은 웹 페이지의 리소스를 받아서

실제로 화면에 페이지를 표시하는 과정을 의미합니다.

이과정은 웹페이지의 로딩 시간과 성능에 중요한 영향을 미치므로 최적화하는 것이 매우 중요합니다.

 

주요 단계

1. DOM 트리 구축 (Constructing the DOM Tree)

브라우저는 HTML을 받아와서 DOM 트리라는 구조화된 표현을 만듭니다.

2. CSSOM 트리 구축 (Constructing the CSSOM Tree)

브라우저는 CSS를 받아와서 CSSOM 트리라는 구조화된 표현을 만듭니다.

3. 렌더 트리 생성 (Render Tree Construction)

DOM 트리와 CSSOM 트리는 합쳐서 렌더 트리를 생성합니다. 렌더 트리는 화면에 실제로 표시될

노드들만을 포함합니다.

4. 레이아웃 (Layout)

렌더 트리가 생성되면, 브라우저는 각 노드의 위치와 크기를 계산하는 레이아웃 과정을 거칩니다.

이를 reflow 라고 합니다.

5. 페인팅 (Painting)

레이아웃 단계 후 , 브라우저는 렌더 트리의 각 노드를 화면에 그리는 페인팅 과정을 시작합니다.

여기는 텍스트, 색상, 이미지, 그림자 등의 세부 요소 그리기가 포함됩니다.

 

CRP 최적화

CRP를 최적화를 하기 위한 목적은 웹페이지를 가능한 빠르게 렌더링 하기 위해서 입니다.

 

최적화 기법

• CSS와 JavaScript의 최소화 및 압축 : 파일의 크기를 줄여 빠른 로딩을 도와줍니다.
• 인라인 CSS와 JavaScript의 사용 최소화 : 중요하지 않은 스타일이나 스크립트를 외부 파일로
  분리하여 초기 렌더링을 가속화
• 비동기 스크립트 로딩 : async나 defer 속성을 이용하여 JavaScript의 실행을 지연시킴으로써 블로킹 방지
• 중요한 CSS를 위쪽에 위치 : 페이지의 위쪽 부분을 빠르게 렌더링하려면 중요한 스타일을 HTML 문서의 상단에 위치 시켜야함.
• 웹 폰트 최적화 : 웹 폰트의 로딩 지연을 방지하기 위해 필요한 스타일만 불러오거나, font-display 옵션을 사용

CSSOM 

CSSOM은 DOM의 CSS 버전으로 생각할 수 있습니다.

DOM이 HTML 문서의 구조화된 표현을 제공하는 것처럼, CSSOM은 CSS 스타일 시트의 구조화된 표현을 

제공합니다.

 

CSSOM의 주요 특징 및 개념

1. 트리 구조 : CSSOM도 트리구조로 구성됩니다. 이 트리의 각 노드는 CSS 규칙을 나타내고,
이 규칙들은 스타일 시트 내의 선택자. 속성 및 값에 해당됩니다.

2. 동적 : CSSOM도 DOM 처럼 동적입니다. 따라서 자바스크립트를 사용하여 실시간으로 CSSOM을 수정할 수 있고,
화면에 즉시 반영됩니다.

3. 렌더링 블록 : 웹 브라우저가 페이지를 렌더링 할 때, CSSOM은 필수적입니다. 브라우저는 DOM과
CSSOM을 합쳐서 렌더 트리를 생성하고, 이 트리를 기반으로 페이지의 레이아웃 및 페인트를 수행합니다.

이 과정에서 CSSOM이 완전히 생성되지 않으면 페이지 렌더링이 차단할수 있기 떄문에, CSS 자원 로딩 처리는 페이지의
성능에 큰 영향을 미칠 수 있습니다.

4. 자바스크립트으와의 상호 작용 : 자바스크립트를 사용하여 CSSOM에 접근하고 변경할 수 있습니다.

 

요약하면, DOM은 HTML 구조를, CSSOM은 스타일 구조를 나타내며, 두 요소는 페이지의 렌더링에 핵심적인 역할을 합니다. 효율적인 DOM/CSSOM 관리를 통해 성능 최적화가 가능합니다.