DOM (Document Object Model)

📌DOM을 알아야 하는 이유

자바스크립트를 이용해 html에서 데이터를 가져오고 싶다면?
웹페이지에 보여지는 데이터를 변경하고 싶다면?
인터렉티브한 웹어플리케이션을 만들고 싶다면?

단순히 정보를 보여주는 웹페이지가 아니라, 동적인 기능이 있는 웹어플리케이션을 만들고 싶다면, 문서를 조작할 수 있게 해주는 DOM을 알아야 합니다.

📌DOM : Document Object Model

지하철역을 동적으로 추가하는 것과 같이 웹페이지 문서를 조작하기 위해서 필수적으로 알아야 하는 것이 DOM이다.

 

여기서 document는 html을 뜻하며,  예를들어 파이어폭스,크롬 같은 브라우저들을 공장이라고 치자. 이 때 HTML 문서는 이 공장들에 보내는 주문서라고 할 수 있다. 이 주문서에는 내가 원하는 웹페이지의 요소들과 그 구조가 설계도처럼 표현되어 있다. body태그 안에 header태그랑 main태그가 있고 header 안에는 ul에 묶여서 li들이 몇개가 들어가고 이러한 구체적인 구조를 HTML이란 주문서에 담아서 웹페이지에 접속할 때 쓰는 브라우저에 보내는 것이다. 

 

그러면 이 브라우저라는 공장에서 HTML이라는 주문서를 보고 그 안의 HTML 요소들 body, div, li, span, 텟스트 내용 이런것들을 실제 제품들로 뚝딱뚝딱 제작하는 것이다. 예를 들어 input태그는 HTML파일에서는 그냥 꺾쇄 안에 input안에

그리고 그 안에 클래스 등의 속성들 등이 든 문자열이지만 이게 브라우저라는 공장으로 들어가면 우리가 아는input, 즉 지정된 타입에 따라 빈 칸이 있어서 문자열이나 숫자를 입력받거나 체크박스로 온/오프를 하는 등의 입력을 받고 그 값들을 value로 내보낼 수 있는 기능들을 다 갖춘 실제 제품 input 오브젝트로 만들어지는 것이다. 이처럼 HTML의 각 요소들이 브라우저에서 실체로 제작되는 것이다.

 

결론적으로 DOM이란 HTML 주문서에 작성한 그 전체 구조에 맞춰서 이 제품들이 배치되고,이것들에 내가 추가적으로 명령을 보내서 속성이나 디자인, 배치 등을 조작할 수 있도록 된 상태 즉, HTML이란 코드로 설계된 웹페이지가 브라우저 안에서 화면에 나타나고 이벤트에 반응하고 값을 입력 받는 등 기능들을 수행할 객체들로 실체화된 형태라고 보면 된다. 

 

👉DOM의 가장 큰 특징

dom은 어떤 언어로든 라이브러리만 갖춰지면 dom을 조작할 수 있다. 그 이유는 이 DOM이 API를 갖고 있어서 이다. API는 간단히 말하면 어떤 방식으로 명령이나 요청을 내리면 그에 따른 기능들을 수행하도록 만든 것이라고 볼 수 있는데, 즉 이 DOM이나, 그 부품들에 각각의 기능별로 버튼같은게 달려있다라고 생각하면 된다. 어떤 언어로든 그 버튼을 눌러서 기능을 작동시킬 수 있도록 말이다. 예들 들어 위에서 input 태그에는 value라는 버튼이 있어서 그 버튼을 누르면 거기에 입력된 값이 반환되는 것이다.

👉DOM API 사용하기

검색어를 입력받는 DOM에 접근하기 위해 아래 검색 input의 태그 예시를 살펴보자

<input id="search" class="search-input-style">

 DOM API에는 getElement 혹은 getElements로 객체를 가져오는 메서드들이 있다. 이런 메서드를 이용해 인자로 엘리먼트에 대한 조건을 전달하면 조건에 부합하는 특정 엘리먼트를 반환한다. getElement , querySelector 는 엘리먼트를 한개만 반환하고  getElements , querySelectAll는 엘리먼트를 여러개를 반환한다.

DOM 객체를 찾는 키워드는 크게 4가지 이다.

<div class="mt-5 mb-6 font-jua">
  <div class="d-inline-block mr-10 font-size-40">tag</div>
  <div class="d-inline-block mr-10  font-size-40">id</div>
  <div class="d-inline-block mr-10 font-size-40">class</div>
  <div class="d-inline-block  font-size-40">cssSelector</div>
</div>

1. 태그로 찾기

document.getElementsByTagName('input')

2. id로 찾기
속도가 가장 빠르다

document.getElementById('search')

3. className으로 찾기

document.getElementsByClassName('search-input-style')

4. cssSelector로 찾기

-일치하는 첫번째 엘리먼트

document.querySelector('.search-input-style')

-일치하는 모든 엘리먼트

document.querySelectorAll('.search-input-style')

👉DOM의 구조

각종 node(모든 HTML 요소들, html,div,radio...)들이 트리구조로 들어있다. 개나 고양이, 토끼가 모두 포유류라는 한 종류로 표현하지만 포유류라는 동물이 없는것처럼 node안에 html,div 등등의 여러 요소들이 있지만 node는 종류를 나타내는 추상클래스라고 볼 수 있다. 

          👉node의 기능 : html 요소들에서 공통적으로 볼 수 있는 기능들은 다수가 node의 속성 또는 기능이라고 보면 된다. textContent,childNodes,firstChild,lastChild,parenrNode,cloneNode,appendChild,insertBefore,removeChild 등등..
그리고 이 node들은 또 EventTarget으로부터 상속받기 때문에 즉 node는 클릭등의 이벤트가 가해지는 EventTarget이기 때문에 이 요소들은 모두 addEventListner 등의 기능 또한 갖고 있는 것이다.

📌깨달아야할 점

DOM은 HTML이나 XML 문서를 실체로 나타내는 API라고 생각하면 된다. 그래서 DOM은 HTML을 위한 API이면서 HTML을 탐색할 수 있고 HTML의 구조를 바꿀 수도 있다.