티스토리 뷰
안녕하세요. 이번 포스팅에서는 정말 친숙하면서도 왠지 어색한 '그 존재', DOM에 대해서 소개해보려고 합니다.
DOM을 친숙하면서도 어색한 존재라고 표현한 이유가 있습니다. 웹퍼블리싱이나 프론트엔드 코딩을 하는 사람들에게 DOM은 단어(약어이긴 하나) 자체만 봤을 땐 무척 친숙한 단어이지만, 누군가가 '도대체 그게 뭔데?'라고 물어보았을 때 'DOM이라는 건...!'하고 자신있게, 또 깔끔하게 답할 수 있는 경우가 그리 많지는 않은 것 같거든요. 머릿속에는 그게 뭔지, 어떤 개념인지에 대한 그림이 왠지 대충 그려지는 것 같은데, 막상 말로 표현하려니 어려운 느낌이랄까? 저역시 마찬가지고요 ㅎㅎ 그래서 이번 기회에 글로써 정리를 해두려고 하니, 필요하신 분들은 참고해보시면 좋을 것 같습니다. 내용 중 일부의 출처는 코디 린들리의 책 <DOM을 깨우치다> (오라일리, 비제이퍼블릭)입니다.
DOM은 자바스크립트 Node 개체의 계층화된 트리다
HTML 문서는 요소가 다른 요소를 포함하는 형태로 작성됩니다. 상위 태그 안에 하위 태그를 작성하고, 그 안에 또 다른 하위 태그를 작성하는 방식이며, 이를 통해 HTML 요소들은 트리(tree) 형태로 표현 가능한 계층구조를 형성하게 됩니다.
HTML 문서는 브라우저에 의해 해석됩니다. 브라우저는 트리 형태로 구조화된 노드들을 가지고 문서를 생성하여 브라우저 화면에 렌더링해주는데, 이때 브라우저 화면에 보여주기 위해 생성한 문서를 DOM(Document Object Model)이라 하는 것입니다.
HTML 문서는 태그 계층으로 구성된 단순 텍스트일 뿐인데, 이를 브라우저에 표현할 수 있도록 변환하는 작업을 진행한 결과가 DOM이라고 생각하시면 되겠습니다. DOM의 목적은 자바스크립트를 사용해 문서에 대한 스크립트 작성(요소 생성, 조회, 변경, 삭제, 이벤트 처리 등)이 가능해지도록 프로그래밍 인터페이스를 제공하는 데 있습니다.
노드란 뭘까
여기에서 말하는 노드는 결국 DOM을 구성하는 요소 하나하나를 의미한다고 보시면 됩니다.
자바스크립트를 사용해 HTML 문서를 다룰 때 접근할 수 있는(읽거나 쓰는) 데이터 유형으로는 다음과 같은 것들이 있습니다.
- DOCUMENT_NODE (ex: window.document)
- ELEMENT_NODE (ex: <body>, <h1>, <p>)
- ATTRIBUTE_NODE (ex: class="item")
- TEXT_NODE (ex: 단순 텍스트)
- 기타 등등
위 목록의 데이터는 모두 노드 개체의 유형으로써, 사용자(자바스크립트)는 각 유형의 개체에 접근하여 관련 속성이나 메소드를 활용할 수 있습니다.
한줄 요약: 자바스크립트로 HTML문서에 접근할 때, 접근하는 '그 대상'이 DOM의 구성 요소이며, '그 대상'들의 집합이 DOM이다.
'IT > 프로그래밍' 카테고리의 다른 글
| [JavaScript DOM] append appendChild 차이 (0) | 2021.08.24 |
|---|---|
| 자바스크립트 마우스 클릭으로 스크롤 이동하기 예제!! (0) | 2021.06.20 |
| [JavaScript DOM] textContent innerText 차이 (0) | 2021.05.11 |
| 자바스크립트 스톱워치 만들기 (3) | 2021.04.29 |
| 자바스크립트 setInterval & clearInterval (0) | 2021.04.27 |