DOM 이란?

 

DOM 이란 무엇일까?

DOM(Document Object Model)은 웹 페이지에 대한 인터페이스입니다. 기본적으로 여러 프로그램들이 페이지의 콘텐츠 및 구조, 그리고 스타일을 읽고 조작할 수 있도록 API를 제공합니다.

 

말이 좀 어렵죠? 저도 이해하는데 시간이 오래걸렸습니다만, 제 나름대로 알기쉽게 설명을 해보자면!

---

DOM은 HTML 문서에 대한 인터페이스.  눈에 보여지는 형태를 말하는데요. 좀 더 쉽게 풀어보자면

태그를 써서 작성하는 HTML 문서가 아니라 Javascript를 이용해서 언제든 수정될 수 있는 동적인 문서 모델을 의미 합니다. 

---

 

제가 제대로 이해한건지 모르겠네요ㅎㅎ.. 

 

이런 식으로 스크립트로 HTML 태그를 만들어서 문서를 작성한다! 이게 DOM이다. 라고 이해를 했어요. 기본적인 자바스크립트 만으로는 DOM을 다루기에는 복잡해서 jquery와 함께 사용하는것이 일반적이라고 해요. 

 

위의 스크립트는 이렇게 HTML 에서 출력됩니다. 

 

개발자도구에서 보면 이렇게 h2 태그가 생겼죠! 신기하네요.!

 

---

Node 란?

 

DOM 에 대한 설명을 보다가 Node 라는 표현이 많이 나와서 이게 도대체 뭔가 했어요.  

 

Node란 각 요소를 의미하는데요. 

 

Element Node (요소 노드) 는 HTML의 태그를 의미합니다. 

 

Text Node 는 요소 노드 안에 들어있는 글자를 의미합니다.

 

처음에는 이해가 잘 안가는데  하다보면 아~ 그렇구나 하고 이해할 수 있을것같아요.  저도 공부를 계속 해서 완전히 이해를 해보도록 하겠습니다.

 

---

DOM에서 자바스크립트로 할 수 있는 것들.

- 자바스크립트는 새로운 HTML 요소나 속성을 추가할 수 있습니다.

- 자바스크립트는 존재하는 HTML 요소나 속성을 제거할 수 있습니다.

- 자바스크립트는 HTML 문서의 모든 HTML 요소를 변경할 수 있습니다.

- 자바스크립트는 HTML 문서의 모든 HTML 속성을 변경할 수 있습니다.

- 자바스크립트는 HTML 문서의 모든 CSS 스타일을 변경할 수 있습니다.

- 자바스크립트는 HTML 문서에 새로운 HTML 이벤트를 추가할 수 있습니다.

- 자바스크립트는 HTML 문서의 모든 HTML 이벤트에 반응할 수 있습니다.

 

이렇게 자바스크립트를 이용해서 HTML의 요소들을 동적으로 제어할 수 있습니다. 

 

---

이렇게 DOM 이란 무엇일까? 를 살펴봤구요.  다음에는 자바스크립트를 이용해서 어떻게 HTML을 다양하게 제어할 수 있는지 실습을 한 뒤  알기 쉽게 정리해서 찾아뵙겠습니다.