[Javascript] 자바스크립트 DOM(Document Object Model)

 

 

1. DOM이란?

---

DOM 계층 구조

 

문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 API이다. HTML내에 들어 있는 요소를 구조적으로 표현하는 양식이자, 그 구조를 통해 각각의 요소에 손 쉽게 접근한다.

 

웹 브라우저는 HTML를 읽을 때, 위의 그림처럼 Document 객체를 뿌리로 하는 tree 자료구조를 구성한다. 근 노드(root node)인 html을 시작으로 단말 노드(leaf node)까지 뻗어나간다. 위쪽을 부모 노드(parent node) 아래쪽을 자식 노드(chile node)라고 부르며, 어떤 노드든지 부모가 되거나 자식이 될 수 있다. 자식이 없는 node를 단말 노드(leaf node)라고 부른다.

 

대체로 DOM이라고 하면  HTML DOM을 얘기하는데, 여기서 HTML은 DOM이 아니다. 이게 무슨 뚱딴지같은 소리인가 싶을 수 있겠지만, 사실 DOM은 브라우저에서 HTML을 파싱하여 만들어낸 객체이다. 개발자 도구에 있는 코드는 브라우저에 의해 파싱된 대표적인 DOM 객체이다.

 

 

 

 

 

 

 

2.  DOM 조작

---

DOM을 조작하기 위해서 주로 자바스크립트를 사용하는데, 아래와 같은 작업을 할 수 있다.

① HTML 요소 불러와 출력하기

② HTML 요소나 속성을 추가 및 제거

③ HTML 문서의 모든 HTML 요소나 속성을 변경

④ HTML에 새로운 이벤트 추가 및 이벤트에 대한 반응

⑤ CSS 스타일 변경

 

개발자 도구에 있는 console을 통해 HTML을 조작할 수도 있고, 따로 js파일을 생성해 html파일과 js파일을 연결하거나, HTML 파일 자체 내에서 <script>태그를 이용해 인라인 코드로 조작할 수도 있다.

 

 

 

 

3. document.querySelector 처리시 자주 처리하는 3대 요소

---

document.querySelector()는 태그나 아이디, 클래스 등을 통해 요소를 선택하는 방법으로 첫 번째로 선택되는 요소 객체를 리턴한다.. 결과가 없다면 null을 리턴한다.

의미	표시	특수문자	ex
HTML tag	태그이름	필요 없음	h1
Class	.클래스명	.	.box
ID	#아이디명	#	#login_button

 

-예시

> document.querySelector("#id이름")

> document.querySelector(".class이름")

> document.querySelector("tag이름")

 

 

 

이를 아래와 같은 메소드로 처리하면 #이나 . 같은 특수문자가 필요없다.

메소드	설명
document.getElementById("id")	id를 통한 요소 찾기
document.getElementsByTagName("tag")	html tag를 통한 요소 찾기
document.getElementsByClassName("class")	class를 통한 요소 찾기

 

 

 

 

4. DOM을 사용할 때 참고하면 좋은 자료

---

 

w3schools에 dom을 사용할 수 있는 방식이나 메소드에 대해서 자세히 나와있으니, 개발할 때 참고하면 좋을 것이다.

https://www.w3schools.com/js/js_htmldom.asp

JavaScript HTML DOM

 

 

 

 

 

 

** 참고 문서 **

MDN: https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction

w3school: https://www.w3schools.com/js/js_htmldom.asp