JS - 점검 4(Document Object Model)

학습 목표

1. DOM 이란 무엇일까?

2. JS로 DOM 조작해보기

3. DOM에 접근할 수 있는 5가지 방법

4. 연습 문제 풀어보기

 

브라우저에 띄울 웹 페이지가 단순히 정보 전달만을 목적으로 하는 정적인 웹이라면 HTML, CSS로도 충분하겠지만

그 이상의 인터랙티브한 기능을 구현하고자 한다면 자바스크립트와 DOM을 반드시 사용해야 합니다.

 

 

1. DOM 이란 무엇일까? (문서 객체 모델)

문서 객체 모델, 즉 DOM은 웹 페이지(HTML이나 XML 문서)의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스입니다.

즉 자바스크립트 같은 스크립팅 언어가 쉽게 웹 페이지에 접근하여 조작할 수 있게끔 연결시켜주는 역할을 담당합니다.

 

 

 

위의 HTML 코드를 기반으로 웹 페이지가 로드되면, 브라우저는 다음과 같이 여러 객체들을 생성이 됩니다.

window └── document     ├── head     │   ├── meta (charset="UTF-8")     │   ├── meta (name="viewport", content="width=device-width, initial-scale=1.0")     │   └── title     │       └── #text ("Document")     └── body         └── h2             └── #text ("HTML 웹 페이지 문서 입니다")

주의 : window 객체는 브라우저의 창이나 프레임을 추상화한 것으로, DOM의 일부분이 아닙니다.

 

window 객체란 JavaScript에서 window 객체는 브라우저 창을 나타내며, 모든 전역 변수와 메서드를 포함합니다. 즉, window 객체는 전역 스코프(Global Scope)를 나타내며, 브라우저의 전역 객체(Global Object)입니다. window 객체는 브라우저 창의 속성과 메서드를 제공합니다. 예를 들어, window 객체를 사용하여 현재 창의 너비와 높이, URL, 브라우저 타이틀 등을 가져올 수 있습니다. 또한, window 객체는 타이머 함수와 이벤트 핸들러 등을 포함하여 다양한 내장 메서드를 제공합니다. 또한, window 객체는 웹 페이지에서 사용할 수 있는 모든 전역 변수와 함수를 포함합니다. 따라서, 전역 변수나 함수를 선언할 때, window 객체를 명시적으로 사용하지 않아도 됩니다. 예를 들어, var a = 10;과 같이 전역 변수를 선언하면, 이 변수는 window 객체의 프로퍼티로 자동으로 등록됩니다. 따라서, window.a와 a는 동일한 변수를 참조합니다.

 

⭐ 이번 과정은 DOM에 집중 합니다

document 노드가 최상위 노드가 되고, 밑으로 element 노드가 오며, 이어 text 노드와 attribute 노드가 오는 계층적인 구조임을 알 수 있습니다. 이러한 노드 타입에는 총 12개가 있는데 가장 중요한 것은 위에서도 명시가 되어 있듯 총 4가지의 노드가 있습니다.

 

위 구조는 트리 자료구조로 노드들의 계층 이루어져 있습니다. 계층 구조로 이루어져 있기 때문에 부모-자식 관계, 형제관계를 표현하는 비선형 자료구조를 나타냅니다. 여기서 비선형 자료 구조란 데이터 요소들 간에 계층적 또는 그래프 관계를 가지는 자료구조를 말합니다. (트리 자료구조 데이터 간의 관계가 1:1 관계가 아닌 경우에 사용)

DOM의 정적 생성 HTML 파일에 적혀 있는 코드를 위에서부터 아래로 읽어내려가며 생성하는 과정 DOM의 동적 생성 자바스크립트를 이용해 있던 노드에 없는 노드를 만들어 이어 붙이는 것

document node (문서 노드)

DOM Tree에서 최상위 루트 노드를 나타내며, document 객체를 가리킵니다.

 

element node (요소 노드)

모든 HTML 요소 (body, h2, div 등)는 이 요소 노드입니다. 속성 노드를 가질 수 있는 유일한 노드로서, 부모-자식 관계를 가지게 되기 때문에 계층적 구조를 이룰 수 있게 됩니다.

 

attribute node (속성 노드)

모든 HTML 요소의 속성은 이 속성 노드입니다. 요소 노드에 대한 정보를 가지고 있습니다. 그렇기 때문에 부모 노드가 아닌 해당 노드와 연결(바인딩)이 되어 있습니다.

 

text node (텍스트 노드)

HTML 문서의 모든 텍스트는 이 텍스트 노드라 해도 과언이 아닙니다. 텍스트 노드는 정보를 표현하며, 가장 마지막에 위치하는 자식 노드이기 때문에 잎사귀를 닮았다 해 리프 노드라고 불리기도 합니다.

 

이 4가지 노드들이 존재함으로써 스크립팅 언어가 웹페이지에 접근하고 조작할 수 있게 됩니다.

특히 데이터 검색하기가 빠른 트리 구조로 이뤄져 있기 때문에 이 접근하고 조작하여 업데이트를 하는 속도는 빠른 편입니다.

 

 

2. JS로 DOM 조작해보기

 

시나리오 코드 1

시나리오 코드 2

 

3. DOM에 접근할 수 있는 5가지 방법

 

 메서드                                                                   설명

getElementById(id)	ID를 기반으로 엘리먼트를 선택합니다.
getElementsByClassName(className)	클래스 이름을 기반으로 모든 엘리먼트를 선택합니다.
getElementsByTagName(tagName)	태그 이름을 기반으로 모든 엘리먼트를 선택합니다.
querySelector(selector)	CSS 선택자를 기반으로 첫 번째 엘리먼트를 선택합니다.
querySelectorAll(selector)	CSS 선택자를 기반으로 일치하는 모든 엘리먼트를 선택합니다.

 

시나리오 코드 3

 

연습 문제 - 1