DOM이란?
Document Object Model(문서객체모델)
html문서에 접근하기 위한 일종의 인터페이스이다.
DOM을 통해 문서(html)내의 요소를 정의하고, 각각의 요소에 접근할 수 있다.
트리구조로 표현되며, core dom, html dom, xml dom 세가지 모델로 구분된다.
쉽게말해, document.getElementByID("");등의 api를 사용 할 때 quotation 안에 들어가는 것들을 dom으로 정의내릴 수 있다.그 말인 즉슨 자바스크립트를 작성할 때 문서 자체를 조작하거나, 문서의 children을 얻기 위해 사용하는 것이 dom이라고도 할 수 있는 것이다.
이렇게 선택을 할 때에는
html tag name, id, class, attribute, selector, object collection을 사용해서 선택할 수 있다.
이런 요소들은 Html문서 내에서 트리구조를 형성하며 이루어져 있고, dom개체구조는 노드트리로 표현된다.
가장 뼈대가 되는 html예시를 보자.
<html lang="en">
<head>
<title>this is title</title>
</head>
<body>
<h1>Hello, world !</h1>
<p>this is paragraph</p>
</body>
</html>여기서 이 예시는 html이라는 큰 줄기 아래 head태그와 body태그가, 그리고 head태그라는 줄기 안에는 다시 title태그, body태그 안에는 다시 h1과 p태그...식의 나무(트리)구조를 형성하고 있는 것을 볼 수 있다.
그러나, html과 dom을 동일시해서는 안된다. dom은 유효한 html문서의 인터페이스이지 브라우저의 개발자도구에서 보여지는 html요소는 아닌 것을 유념해야 한다.
요약
- dom은 html형식이 Js에 의해 조작 가능한 형태인 것을 말한다.
- 가상요소는 포함하지 않지만 보이지 않는 요소는 포함한다.
- 개발자도구 element와 dom은 다르다.
뜨개질 어딕트 개발자