🙌 DOM이란?

DOM은 Documnet Object Model의 약어로 HTML 및 XML 문서의 프로그래밍 인터페이스를 의미합니다. 웹 페이지를 구성하는 모든 요소(태그, id, 클래스 등)를 트리 구조로 나타내며, 이 구조를 통해 자바스크립트와 같은 프로그래밍 언어가 문서의 내용, 구조, 스타일을 동적으로 읽고 수정할 수 있습니다.

즉, DOM 웹 페이지의 모든 요소를 객체로 표현하고, 이 객체들을 통 해 페이지를 스크립트로 조작할 수 있는 방법을 제공합니다.

웹 브라우저가 HTML 문서를 로드하고 파싱하는 과정에서 생성되는 DOM은 실제로 웹 페이지의 구조, 스타일, 내용 등을 표현하는 객체 모델로, 브라우저의 메모리에 저장됩니다.

이 메모리 상의 주소를 통해 자바스크립트와 같은 스크립트 언어들은 웹 페이지를 동적으로 조작할 수 있습니다.

DOM이 메모리에 올라가는 과정

1. HTML 문서 로딩

   사용자가 웹 페이지에 접속하면, 웹 브라우저는 서버로부터 HTML 문서를 로드합니다.

2. 파싱

   로드된 HTML 문서는 브라우저의 HTML 파서에 의해 읽혀지고, 문서의 요소(태그, 속성, 텍스트 등)들을 파싱하여 이해합니다.

3. DOM 트리 생성

   파싱 과정에서 문서의 구조에 따라 요소들이 노드로 변환되고, 이 노드들이 부모-자식 관계를 반영한 트리 구조인 DOM 트리를 형성합니다.

4. 메모리 저장

   생성된 DOM 트리는 브라우저의 메모리에 저장됩니다. 이 메모리 상의 데이터 구조를 통해 자바스크립트와 CSS가 웹 페이지의 요소들을 쉽게 찾고 조작할 수 있습니다.

🙌 자바스크립트에서의 DOM 제어

자바스크립트에서 DOM을 제어하는 다양한 방법들이 있습니다.

1. 요소 선택

document.getElementById(), document.getElementsByTagName(), document.querySelector(), document.querySelectorAll() 등의 메서드를 사용하여 HTML 요소를 선택할 수 있습니다.

var header = document.getElementById('header');
var listItems = document.querySelectorAll('.list-item');

2. 요소 조작

선택한 요소의 내용을 변경하거나 스타일을 수정할 수 있습니다.

header.textContent = "새로운 제목";
header.style.color = "red";

3. 이벤트 핸들링

요소에 이벤트 리스너를 추가하여 사용자의 행동에 반응하게 할 수 있습니다.

header.addEventListener('click', function() {
  alert('헤더가 클릭되었습니다!');
});

4. 요소 추가 및 삭제

새로운 요소를 생성하거나 기존 요소를 삭제할 수 있습니다.

var newElement = document.createElement('p');
newElement.textContent = "새로운 문단";
document.body.appendChild(newElement);

document.body.removeChild(newElement);

🙌 참고 : Window 객체와 Document 객체 차이

Window 객체

Window 객체는 브라우저에서 열린 하나의 탭 또는 창을 나타냅니다. 이 객체는 자바스크립트에서 가장 상위에 위치하는 객체이며, 모든 글로벌 변수, 함수, 객체(HTML, CSS, JavaScript가 상호작용하는 공간)가 포함된 전역 스코프로서 동작하게 됩니다.

주요 역할은 브라우저 창의 차원에서 동작을 관리합니다. 예를 들어 창을 새로 열거나 닫는 행위, 크기를 조절하는 행위 등이 있습니다.

또한 전역 객체로서, JavaScript의 모든 글로벌 함수(alert(), setTimeout(), setInterval() 등)와 변수들을 보유하고 있습니다.

JavaScript에서 window 키워드를 사용하여 Window 객체에 접근할 수 있습니다. 일반적으로는 window.는 생략할 수 있으므로, window.alert() 대신에 alert()를 사용할 수 있습니다.

Document 객체

Document 객체는 현재 웹 브라우저의 창 또는 탭에 로드된 웹 페이지를 나타냅니다. 이 객체는 HTML 문서의 루트로서 DOM의 진입점을 나타냅니다.

HTML과 JavaScript, CSS를 연결하는 매개체로서 웹 페이지의 모든 요소에 접근하고 조작하는 기능을 담당합니다. 웹 페이지의 내용, 구조, 스타일을 동적으로 읽고, 수정하고, 업데이트할 수 있도록 합니다.

JavaScript에서 document 키워드를 사용하여 Document 객체에 접근할 수 있으며, 이 객체는 Window 객체의 속성 중 하나입니다.

Window와 Document의 주요 차이

범위: Window 객체는 브라우저 탭 또는 창 전체를 대표하는 반면, Document 객체는 개별 웹 페이지 내의 문서(HTML)에 국한됩니다.

기능: Window 객체는 브라우저 창이나 탭의 기능(예: URL, 창 크기 조절, 타이머)을 다루고, Document 객체는 DOM을 통해 문서 내의 요소를 조작하는 데 중점을 둡니다.