DOM이란?
텍스트 파일로 만들어져 있는 웹 문서(HTML 파일, XML, SVG)를 브라우저에 렌더링 하려면 웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야 합니다.
브라우저의 렌더링 엔진은 웹 문서를 로드한 후, 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는데 이를 DOM이라 합니다. 즉 모든 요소와 요소의 어트리뷰트, 텍스트를 각각의 객체로 만들고 이들 객체를 부자 관계를 표현할 수 있는 트리 구조로 구성한 것이 DOM입니다.
DOM은 자바스크립트를 통해 동적으로 변경할 수 있으며 변경된 DOM은 렌더링에 반영됩니다.
그림을 보면 브라우저는 웹 문서(HTML 파일,XML, SVG)를 로드한 후 파싱하여 DOM을 생성합니다.
이러한 웹 문서의 동적 변경을 위해 DOM은 프로그래밍 언어가 자신에 접근하고 수정할 수 있는 방법을 제공하는데 일반적으로 프로퍼티와 메서드를 갖는 자바스크립트 객체로 제공됩니다. 이를 DOM API(Application Programming Interface)라고 부릅니다. 달리 말하면 정적인 웹페이지에 접근하여 동적으로 웹페이지를 변경하기 위한 유일한 방법은 메모리 상에 존재하는 DOM을 변경하는 것이고, 이때 필요한 것이 DOM에 접근하고 변경하는 프로퍼티와 메서드의 집합인 DOM API입니다.
DOM은 HTML, ECMAScript에서 정의한 표준이 아닌 별개의 W3C의 공식 표준이며 플랫폼/프로그래밍 언어 중립적입니다. DOM은 다음 두 가지 기능을 담당합니다.
- HTML 문서에 대한 모델 구성
- HTML 문서 내의 각 요소에 접근/수정
DOM의 생김새
추상적인 공간이라 처음에는 이해하기 어렵지만 그림을 잘 보면 이해하기 좋습니다. HTML의 모든 요소를 객체화하여 표현한 것입니다.
<!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>이러한 HTML 파일이 있다고 가정하면 이 파일의 DOM Tree 구조를 보면
이렇게 각 태그 별로 나뉘면서 속성값과 내용을 나무의 구조로 저장되게 합니다.
이렇게 속성값과 내용이 있는 DOM 을 Javascript를 이용해서 동적으로 웹페이지를 변경할 수 있습니다.
몇 가지 사례를 볼까요?
하나의 요소 노드 선택
1. document.getElementById(id)
// id로 하나의 요소를 선택한다.
const elem = document.getElementById('one');
// 클래스 어트리뷰트의 값을 변경한다.
elem.className = 'blue';이 내용을 개발자 도구에 작성하면 위의 예시 html 이 어떻게 변화할까요?
- id 어트리뷰트 값으로 요소 노드를 한 개 선택한다. 복수개가 선택된 경우, 첫 번째 요소만 반환한다.
- Return: HTMLElement를 상속받은 객체
- 모든 브라우저에서 동작
2. document.querySelector(cssSelector)
// CSS 셀렉터를 이용해 요소를 선택한다
const elem = document.querySelector('li.red');
// 클래스 어트리뷰트의 값을 변경한다.
elem.className = 'blue';- CSS 셀렉터를 사용하여 요소 노드를 한 개 선택한다. 복수개가 선택된 경우, 첫 번째 요소만 반환한다.
- Return: HTMLElement를 상속받은 객체
- IE8 이상의 브라우저에서 동작
여러 개의 요소 노드 선택
1. document.getElementsByClassName(class)
const elems = document.getElementsByClassName('red');
//유사 배열 객체인 HTMLCollection을 배열로 변환한다.
//배열로 변환된 HTMLCollection은 더 이상 live하지 않다.
console.log([...elems]); // [li#one.red, li#two.red, li#three.red]
[...elems].forEach(elem => elem.className = 'blue');배열로 생성해서 forEach 문을 사용하는 것을 권장한다고 합니다.
실제로 for 문이나 while 문을 사용해 봤는데 for 문은 동작이 정상적으로 되지 않고 while 문도 동작이 무한대로 반복되기 때문에 별로 좋다고 생각하지 않습니다.
- class 어트리뷰트 값으로 요소 노드를 모두 선택한다. 공백으로 구분하여 여러 개의 class를 지정할 수 있다.
- Return: HTMLCollection (live)
- IE9 이상의 브라우저에서 동작
2. document.getElementsByTagName(tagName)
const elems = document.getElementsByTagName('li');
[...elems].forEach(elem => elem.className = 'blue');- 태그명으로 요소 노드를 모두 선택한다.
- Return: HTMLCollection (live)
- 모든 브라우저에서 동작
3. document.querySelectorAll(selector)
// Nodelist를 반환
const elems = document.querySelectorAll('li.red');
[...elems].forEach(elem => elem.className = 'blue');- 지정된 CSS 선택자를 사용하여 요소 노드를 모두 선택한다.
- Return: NodeList (non-live)
- IE8 이상의 브라우저에서 동작
이런식으로 Javascript를 이용해서 HTML을 동적인 웹페이지로 만들 수 있습니다.
이것 말고도 동적으로 변경할 수 있는 명령어들이 많습니다. 아직 웹페이지 꾸미는 것을 많이 배우지 않은 관계로 학습을 한 후에 기회가 되면 그때 몇 개 또 알아보도록 하겠습니다.
소감
배울 내용이 아직도 많이 남았다는 것이 즐겁습니다. 배움이 멈추게 되면 아마도 지루하고 반복되는 일상을 보내게 되겠지요.
또한 인과관계가 뛰어난 이 컴퓨터 세계가 생성되어서 너무나도 기쁩니다. 중용을 지키며 휴식할 때는 휴식을! 공부할 때는 공부를 하며 행복한 나날을 보내고 싶습니다.
출처
'코딩 개발 > Javascript' 카테고리의 다른 글
| jQuery 1탄 (ready, click, text, $(요소 선택) ) (0) | 2023.06.19 |
|---|---|
| Ajax (0) | 2023.06.08 |
| Execution Context & Call Stack (0) | 2023.05.14 |
| JavaScript - async/await (0) | 2023.02.07 |
| JavaScript - Promise (0) | 2023.02.07 |
