[Javascript] DOM이란? | DOM의 선택자 | DOM tree | node vs element

HTML을 위한 프로그래밍 인터페이스인 DOM(Documnet Object Model)에 대해 알아보자.

issabmsangare.medium.com/nodes-vs-elements-in-the-dom-1865885d0b9b

Nodes vs Elements in the DOM

developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction

DOM 소개 - Web API | MDN

 

DOM에 대한 개념은 개발자 면접에서도 자주 등장한다고 한다. 하지만 DOM의 개념은 그 정의가 딱 떨어지는 명확한 개념이 아니라 약간 추상적이고 한마디로 정의하기 애매한 개념이다.

 

1. DOM(Document Object Model)이란?

 

DOM이란 웹페이지가 스크립트나 프로그래밍 언어에서 사용될 수 있게 연결해주는 프로그래밍 인터페이스이다.

 

자바스크립트 자체로는 HTML문서 안에있는 태그나 문자열에 접근하지 못하지만 DOM을 통해 HTML문서에 접근하여 내용을 수정하거나 동작을 정의할 수 있게 된다.

 

예를 들어 HTML문서가 건물의 설계도라면 DOM이라는 인터페이스를 이용해 그 설계도를 토대로 여러 요소와 기능을 추가함으로써 건물을 지을 수 있게 되는 것이다.

 

건물의 요소를 수정한다고 설계도가 바뀌는 것이 아니듯이 우리가 자바스크립트를 수정해도 HTML문서 자체를 변하지 않는다.

 

DOM은 document, 즉 웹 문서의 모든 요소를 객체화한 모델이며 HTML의 모든 요소와 요소의 속성, 텍스트를 모두 객체화하여 이들의 관계를 부자관계로 표현하여 트리구조로 구성한 것이 DOM tree이다.

 

 

(간단한 예제)

 

간단한 html문서를 만들어 js파일과 연결했다.

 

sample.js

html파일을 실행해 console창을 열어보면

이렇게 html 문서 전체가 콘솔창에 입력된 것을 확인할 수 있다.

 

document.title 명령을 통해 이 문서의 title인 'Document'가 출력된 것을 볼 수 있다.

 

이렇게 파일의 주소까지도 DOM을 이용해 불러올 수 있다.

 

* DOM 트리

HTML에서 모든 요소(Element), 어트리뷰트, 텍스트는 하나의 객체이며 document의 자식이다.

DOM tree의 진입점은 document이며 최종점은 요소의 텍스트이다.

 

* node vs element

 

- node는 DOM트리에 있는 모든 타입의 객체를 포괄하는 개념으로 문서 그 자체가 될수도 있고 특정한 HTML 태그인 <div>, <h1>, <input>이 될수도 있다.

 

즉, node는 모든 DOM 객체를 뜻하며 각각의 node는 부모요소를 갖고있고 자식요소도 가질 수 있다.

 

- element는 node의 한 형태로서 HTML의 태그로 특정되어 id나 class같은 속성을 가질 수 있다.

 

node는 API에 존재하는 모든 것을 포괄하여 웹페이지를 구정하는 모든 컴포넌트들을 뜻하고 element는 node의 한 형태로 node가 element를 포함하는 개념이다.

 

 

2. DOM의 선택자

 

HTML문서 안에 있는 요소를 선택하는 방법에는 4가지가 있다.

 

• 아이디이름을 이용하여 선택

아이디를 가진 요소를 선택할 때는 getElementById속성을 이용한다.

 

var 변수명 = document.getElementById("id이름");

 

아이디는 하나의 요소를 선택할 때 사용되는 고유한 이름이기 때문에 위 예문을 통해 선택되는 요소는 하나이다.

 

• 클래스이름을 이용하여 선택

클래스이름을 이용해 요소를 선택할때는 getElementsByClassName속성을 이용한다.

 

var 변수명 = document.getElementsByClassName("class이름");

 

• 태그이름을 이용하여 선택

태그이름을 이용하여 선택할 때는 getElementsByTagName속성을 이용한다.

 

var 변수명 = document.getElementsByTagName("태그이름");

 

* getElement? getElements?

위 선택자들을 사용해 요소를 지정할 때 철자 실수하기 쉬운 부분이 s의 유무이다.

아이디는 s가 안붙고, class와 tag에는 s가 붙는데 그 이유는 id의 값은 HTML문서 안에서 고유한 값이지만, class와 tag는 한 HTML문서 안에 여러 요소를 선택할 수 있기 때문이다. 

• CSS선택자를 이용하여 선택

가장 많이 사용되는 방법이다. css에서 선택자를 선택해주는것처럼 선택자를 지정해주면 된다.

 

var 변수명 = document.querySelector("선택자")

var 변수명 = document.querySelectorAll("선택자")

 

document.querySelector를 사용하면 문서 내에 해당 선택자에 해당되는 요소 중 첫 번째 요소가 선택된다.

 

document.query SeletorAll는 해당 선택자에 해당하는 모든 요소를 배열 형태로 반환한다.