DOM

이나영·2021년 9월 10일

DOM JavaScript

0. 개요

1. 정의

2. 역할

3. 과정

4. 선택자

JavaScript

목록 보기

6/8

0. 개요

HTML과 JavaScript를 연결할 때 우리는 <script><script/>태그를 사용한다. 이리하면 js 파일에 존재하는 함수들을 html 문서에 적용시킬 수 있다. 그렇다면 실제로 함수들은 어떻게 html 요소들에 접근하는 걸까? 이 역할을 수행하는 것이 바로 DOM이다.

1. 정의

Document Object Model
: 웹페이지의 html을 계층화시켜 트리 구조로 만든 객체 모델

'DOM'이란 단어를 풀어 직역하자면 '문서를 객체 형태로 만들어 놓은 모델'이다.

여기서 문서는 당연히 HTML을 의미한다. 이 HTML을 보면 아래와 같은 구조를 가진다.

<html>
    <head>
    </head>
    <body>
    	....
    </body>
</html>

큰 뿌리인 html 안에 head와 body가 존재하고, 이들은 각각 또 다른 요소들을 품고 있을 것이다. 이것이 마치 나무가 뻗어나가는 모습과 같다 하여 트리 구조의 객체와 같다고 표현한 것이다.

2. 역할

개요에서 언급했듯이 DOM은 JavaScript 파일에 있는 함수들이 HTML 문서 속 요소들에 접근할 수 있도록 해준다. 즉, DOM은 HTML과 JavaScript를 이어주는 중간 다리 역할을 수행한다고 할 수 있다.

HTML/CSS - [DOM] - Javascript

3. 과정

'document'라는 전역 객체가 존재한다. 이 document 객체는 HTML 문서 그 자체를 나타낸다고 말할 수 있는데, JavaScript는 바로 이 document 객체를 통해 DOM에 접근이 가능하다.

document.querySelector("body");

다음과 같은 코드가 있다. 우선 document라는 전역 객체를 통해 DOM 트리 구조에서 가장 위에 존재하는 근본, root node에 접근할 수 있다. 이제 이 root node부터 점차 아래로 내려가면서 자식 노드들에 접근이 가능하다.

4. 선택자

특정 node에 접근하기 위해 앞으로 종종 사용하게 될 method들이 있다. getElement와 querySelector이다.

1) getElementsBy~ / getElementById

사람들은 종종 '살아있다'라고 표현을 한다. 예를 들어 우리가 어떤 함수를 써서 HTML 문서에 동적으로 어떤 요소를 더 추가했다고 하자. 이런 경우 getElement를 사용하면 이렇게 추가된 요소들을 모두 반영해 적합한 요소를 리턴해준다. 이는 getElement의 리턴값이 HTML Collection이기 때문이다.