[Javascript DOM] The DOM (Document Object Model)이란?

Proclaim

이 글의 코드는 참고자료에서 인용한 것임을 미리 알려드립니다.
글이 매우 길기 때문에,시리즈(DOM Series)로 분할하였습니다.

DOM 시리즈와 관련된 모든 링크는 이 페이지에 올릴 예정입니다.

---

DOM(Document Object Model) in Javascript

DOM이란 Document Object Model으로 HTML document의 standard API이다.
Web Page는 HTML로 나타나는 Document이고, 그것을 바꿀 수 있게 해주는 것이 DOM이라고 보면 된다. 우리는 아래와 같은 것들을 DOM에 접근하여 바꿀 수 있다.

 

• HTML elements
• HTML attributes
• CSS styles
• HTML events

 

위와 같은 것들을 add(create), remove, change할 수 있다.
이것을 javascript로 dynamic하게 조작할 수 있다.
Document의 Property는 MDN에 자세하게 나와있다.

 

DOM을 왜 알아야 하는가?

DOM의 조작은 성능과 매우 밀접한 관계를 가집니다. 불필요한 DOM 조작을 줄이고 DOM 접근을 최소화 하는 것은 성능향상에 반드시 필요한 작업입니다.

DOM을 사용하기 위해 특별히 할 것은 없습니다. 브라우저에 따라 DOM을 처리하는 방식이 다르지만 모든 웹 브라우저는 Javascript를 통해서 DOM을 조작합니다.

DOM은 프로그래밍 언어는 아니지만, DOM 없이는 Javascript는 아무것도 할 수 없습니다. DOM에 접근하여 document를 조작할 수 있고, Javscript와 같은 script 언어를 사용하는 것입니다.

 

document object를 하나씩 테스트 해보자.

//document의 내부 property를 모두 보려면 console.dir를 사용하자.

console.dir(document);

document의 몇가지 property들을 하나씩 찍어보자.

(아무 사이트에서나 실습해보면 된다.)

console.log(document.domain);
console.log(document.URL);
console.log(document.title);
console.log(document.doctype);
console.log(document.head);
console.log(document.body);
console.log(document.all); // HTMLALLCollection
console.log(document.all[10]); // select html element from HTMLALLCollection
console.log(document.forms[0]); // HTMLCollection of forms
console.log(document.images); //HTMLCollection of images
console.log(document.links); //HTMLCollection of links

document.all[10].textContent = "Hello"; //change textContent

 

DOM Series

DOM Series 링크 입니다.
(DOM시리즈는 이후에도 계속 추가 업데이트 할 예정입니다.)

 

DOM manipulation

- DOM의 element를 선택하고, 새로만드는 등 DOM 조작을 해봅니다.

 

DOM Event handler [Not yet]

- DOM에 mouse, key press 등 여러가지 event를 적용합니다.

 

Virtual DOM [Not yet]

- React의 Virtual DOM에 대해 학습합니다.

 

Reference

What is the Document Object Model
Youtube Traversy Media