js 공부 할때 항상 나오는 DOM....
DOM이란 정확히 무엇일까?
DOM이라는 단어가 눈과 귀에 익숙함에도 막상 DOM이 무엇이냐고 물어봤을 때
"브라우저 개발자 툴에서 Element 객체 말할 때 그거~ 노드 말할 때 그거~"
라고 얼렁뚱땅 대답하게 됩니다.
이번에 js 공부를 다시 한번 하는김에 dom에 대해 완전히 정복해보려고 합니다.
DOM이란?
문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.
출처: MDN
너무 불친절하다...
간단히 말하자면!!
DOM은 HTML을 위한 API이면서 HTML을 탐색할 수 있고 HTML의 구조를 바꿀 수도 있다!
또한, DOM 은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM을 수정할 수 있다.
그렇다. 우리가 JavaScript로 구현한 모든 동작들이 대체로 DOM을 수정하기 위한 것이었다...
JavaScript는 브라우저가 읽고 어떤 작업을 할 수 있는 언어.
DOM은 바로 이 작업이 이루어지는 장소인 것이다.
그렇다면 이 DOM은 왜 생겨난 것 일까?
DOM이 생겨난 이유
태초에 웹은 문서를 공유하기 위해 만들어졌다고 한다.
웹은 문서를 공유하기 위해서 만들어졌고, 해당 문서를 만들기 위해서 HTML이라는 문서에 마크업이라는 언어를 만들고 문서를 만들 수 있게 되었다.
이후 서버에서 프로그래밍을 통해서 HTML을 제작할 수 있는 PHP와 같은 서버언어가 등장했고 이를 통해서 컨텐츠가 포함된 HTML을 동적으로 생성할 수 있게 되었다.
이 개념을 브라우저가 새로고침을 하지 않고 서버의 개입없이 브라우저 내부에서 동적으로 HTML을 변경하고자 자바스크립트가 탄생을 했다.
여기서 알아두면 좋은 것은 브라우저가 먼저 만들어졌고 서버언어가 만들어졌고 자바스크립트가 더 나중에 만들어졌다는 점이다.
HTML은 문자열이다
HTML이 좋은 점은 바로 문자열로 이루어져있다는 점이다. 그렇기에 서버 언어에서는 별다른 HTML 전용 API없이도 문자열의 조작을 통해서 얼마든지 HTML을 만들어 낼 수 있었다.
PHP Code:
<?php
$name = "teo.yu";
?>
<h1>hello, <?=$name?>!</h1>HTML Result:
<h1>hello, teo.yu!</h1>그러면 javascript에서도?
출처: https://imyeonn.github.io/blog/web/86/
서버에서 그랬던 것 처럼 화면에 그대로 문자열을 출력하듯이 HTML을 출력해버리면 어떨까? document.write() 라는 아주 간단한 API를 만들어서 서버에서 동작하듯이 만들어 보았다.
이 방식은 맨 처음 동적으로 문서를 만드는 것 까지는 좋았으나 이후 새롭게 문서를 변경하기 위해서 몇 가지 문제점이 있다는 것을 알게된다.
HTML 문서가 화면에 그려지기 까지...
HTML은 결국 사람이 편리하게 다룰 수 있는 문자열이지 컴퓨터가 알아듣고 사용하기에 좋은 언어는 아니다. 컴퓨터가 이를 해석하고 그릴 수 있게 하기 위해서 HTML을 분석하고 정리해서 화면에 그릴 수 있는 구조를 만들어야 하는데, 이 과정은 확실히 적은 비용이 아니게 된다.
우리가 "JavaScript로 하는 것" 이라고 생각하는 것은 정확히는 "DOM API"이다.
이렇게 화면에 그릴 수 있는 구조를 이미 만들어둔 상태에서 일부 변경된 화면을 만들기 위해 처음부터 다시 변경된 HTML을 분석하여 다시 전부 구조를 만들어 적용하는 방식은 비효율적이었다고 한다.
그래서 최초 HTML을 통해 한번 구조를 만들었다면 다음번 변경은 HTML의 조작이 아닌 이미 만들어진 구조에서 직접 일부 수정을 하는 방식을 통해 훨씬 더 적은 비용으로 화면을 변경할 수 있게 된다.
그래서 DOM이 필요하다!
HTML을 동적으로 보다 효율적으로 변경하기 위해서 HTML 문서(Docuemnt) 를 자바스크립트가 이해할 수 있는 객체(Object) 의 형태로 모델(Model)링 하여 자바스크립트에서 조작을 할 수 있도록 만든 ⭐️ interface가 바로 이 DOM(Document Object Model)인 것이다.
다시 말해 DOM은 HTML이 아니다!
DOM을 대하는 마음가짐
✨ DOM = HTML을 수정하는 법을 컴퓨터가 알아듣게 작성하는 방법
HTML을 페어 프로그래밍을 한다고 상상을 해보면, 키보드를 담당하는 동료에게 원하는대로 지시를 하는 네비게이터의 입장이 되었을때, title 클래스를 추가하고 싶어서 우리는 아마 이렇게 말하게 된다.
"여기 h1 엘리먼트 옆에 class에 title 좀 넣어 주세요."
똑똑한 사람은 그저 타이핑을 통해서 우리에게 원하는 HTML을 만들어 줬겠지만
키보드를 담당하는 친구가 컴퓨터였다면 어떨까요?
우리가 원하고자 행동을 정.확.하.게 알려줘야 될 것입니다.
// 여기 h1 엘리먼트 옆에 (X)
// => 전체 'h1' tag로 된 엘리먼트 중 [0]번째를 가져와주세요! (O)
const h1 = document.getElementsByTagName('h1')[0];
// class에 title 좀 넣어 주세요! (X)
// => 해당 엘리먼트의 classList에 'title'을 add해주세요! (O)
h1.classList.add('title')DOM을 공부하는 첫번째 방법은 변경하고자 HTML을 떠올리고 달라진 점을 어떤식으로 알려줘야 하는 지 컴퓨터가 알아들을 말(=API)을 찾는 것이다. 마치 외국으로 여행가서 주문할때 여행영어회화 책자를 뒤지듯이 말이다.
DOM을 공부하기가 힘든 이유는 우리에게는 타이핑으로 쓰고 지우고 하면 되는 행동을 컴퓨터에게 시키기 위해서는 각각의 다 다른 방법(=API)으로 알려줘야 하기 때문이다.
DOM은 어떻게 생겼을까?
DOM은 일단 HTML을 표현하고 조작하는데 목적이 있기 때문에 HTML의 구조를 그대로 닮아있게 된다.
HTML에는 Tag를 가지는 Element와 Text로 나뉘고 엘리먼트는 여러개의 Attribute를 가집니다.
DOM에서는 이러한 각각의 요소를 Node라고 부르며 HTML과 마찬가지로 Element Node, Attribute Node, Text Node로 부르게 됩니다. 그밖에 주석이나 문서와 같은 Node도 존재합니다.
자세한 내용은 아래 링크를 참조해주세요.
문서 객체 모델(Document Object Model)
https://poiemaweb.com/js-dom
NodeType의 종류
https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType
DOM Tree
HTML의 엘리먼트는 동일한 엘리먼트를 포함할 수 있는 구조가 됩니다. 이러한 구조를 Tree라 부르기에 HTML이 여러개의 Element와 Node로 구성되어 있는 것을 DOM Tree 라고 부른다.
트리 보다는 폴더 구조로 이해하고 Element는 폴더 Text는 파일로 생각을 하면 조금 더 이해하기 편하다.
요약하자면,
DOM은 HTML 문서에 대한 인터페이스다.
첫째로 뷰 포트에 무엇을 렌더링 할지 결정하기 위해 사용되며,
둘째로는 페이지의 콘텐츠 및 구조, 그리고 스타일이 자바스크립트 프로그램에 의해 수정되기 위해 사용된다.
DOM은 원본 HTML 문서 형태와 비슷하지만 몇 가지 차이점이 있다.
- 항상 유효한 HTML 형식이다.
- 자바스크립트에 수정될 수 있는 동적 모델이어야 한다.
- 가상 요소를 포함하지 않는다. (Ex. ::after)
DOM을 사용하는 하는 이유?
- 자바스크립트를 통해 HTML에서 데이터를 가져오고 싶을 때
- 웹 페이지 데이터를 동적으로 변경하고 싶을 때
- ineractive 한 대화형 웹 애플리케이션(Web App)을 만들고 싶을 때
DOM에 접근하는 방법
단수 객체 접근 : getElementByxx(), querySelector() 사용
복수 객체 접근 : getElements(), querySelectorAll() 사용
1개의 DOM Element는 다음과 같이 Tagname, Id, ClassName, CSSSelector를 통해 가져올 수 있다.
// TagName으로 찾기
document.getElementsByTagName('input')
// ID로 찾기
document.getElementById('search') // ID는 유일값이기 때문에 가장 빠르게 찾아올 수 있다.
// ClassName으로 찾기
document.getElementsByClassName('search-input-style')
// CSSSelector로 찾기
document.querySelector('.search-input-style') // 일치하는 가장 첫 Element만 가져온다.
document.querySelectorAll('.search-input-style') // 일치하는 모든 Element를 가져온다.
그래서 DOM은 HTML을 위한 API이면서 HTML을 탐색할 수 있고 HTML의 구조를 바꿀 수도 있습니다.
