DOM은 무엇인가?
DOM은 Document Object Model의 약자로, HTML(Document)에 접근하여 Object(JavaScript Object)처럼 HTML을 조작(Manipulation)할 수 있는 Model이라는 의미를 가지고 있습니다. 즉, 자바스크립트를 사용하는 방법을 알고 있으면 DOM을 활용하여 HTML을 조작할 수 있다는 의미입니다.
문서 객체 모델(DOM)에 따르면, 모든 HTML 태그는 객체입니다. 태그 하나가 감싸고 있는 ‘자식’ 태그는 중첩 태그(nested tag)라고 부릅니다. 태그 내의 문자(text) 역시 객체입니다.
이런 모든 객체는 자바스크립트를 통해 접근할 수 있고, 페이지를 조작할 때 이 객체를 사용합니다.
<!DOCTYPE HTML>
<html>
<head>
<title>사슴에 관하여</title>
</head>
<body>
사슴에 관한 진실.
</body>
</html>DOM은 HTML을 아래와 같이 태그 트리 구조로 표현합니다.
트리에 있는 노드는 모두 객체입니다.
태그는 요소 노드(element node) (혹은 그냥 요소)이고, 트리 구조를 구성합니다. html은 루트 노드가 되고, head와 body는 `루트 노드의 자식이 됩니다.
요소 내의 문자는 텍스트(text) 노드가 됩니다. 위 그림에서 text를 확인해보세요. 텍스트 노드는 문자열만 담습니다. 자식 노드를 가질 수 없고, 트리의 끝에서 잎 노드(leaf node)가 됩니다.
위 그림에서 title 태그는 "사슴에 관하여"라는 텍스트 노드를 자식으로 갖습니다.
dom 구조의 특징
dom구조를 살펴 보면 비슷한 구조의 그림을 찾아볼수있다 .
이런 자료 구조를 컴퓨터 공학에서는 트리 구조라고 합니다. 가장 큰 특징은, 부모가 자식을 여러개 가지고, 부모가 하나인 구조가 계속 반복된다는 점입니다. 즉, 부모가 가진 하나, 혹은 여러개의 자식 엘리먼트를 조회하는 코드를 계속 반복해서 실행하게 될 것입니다.
안녕하세요 종하님!! 각각의 개념들을 구체적으로 정리하는 방식으로 블로그를 작성해주셨군요 ㅎㅎ 꼼꼼하게 잘 정리해주셨네요 :) 개념정리와 함께 어떤 문제들을 풀어보셨는 지, 어떤 문제들이 어려웠는지, 그 개념에 대해서 내가 알고 있는 것과 모르는 것이 무엇인지 이런 부분들도 함께 고민해보시면 더 좋을 것 같아요! 지난 한주도 수고하셨고 다음주도 화이팅하시길 바랄께요!!