JavaScript를 공부하다보면 브라우저 기반의 여러 객체들에 대해서 듣게 됩니다. 처음부터 이 객체들이 구체적으로 파악하기는 쉽지 않습니다. 하지만 JavaScript는 이런 웹 브라우저 기반의 객체 위에서 동작하니 잘 알아야겠죠. 이번 포스팅에서는 DOM에 대해서 알아보겠습니다.
BOM이란 무엇인가?
웹 서비스 개발은 브라우저와 밀접한 관련이 있습니다. 모든 서비스는 사실 웹 브라우저를 바탕으로 실행이 되니까요. 이 브라우저와 관련된 객체들의 집합을 브라우저 객체 모델(BOM: Browser Object Model)이라고 부릅니다. 이 브라우저 객체 모델(BOM)을 이용해서 Browser와 관련된 기능들을 구성합니다. DOM은 이 BOM 중의 하나입니다.
브라우저 객체 모델(BOM)의 최상위 객체는 window라는 객체입니다. DOM은 이 window 객체의 하위 객체이기도 합니다.
DOM이란 무엇인가?
DOM을 조금 풀어서 써 볼까요? DOM은 Document Object Model의 약자입니다. Document는 문서이고 Object는 객체로 번역이 되죠. 그리고 Model은 그냥 모델로 많이 쓰죠. 문서 객체 모델로 번역을 할 수 있겠네요. 번역을 해도 아직 통 감이 오지 않네요.
도대체 이 문서 객체란 것이 무엇일까요? 문서 객체란 <html>이나 <body> 같은 html문서의 태그들을 JavaScript가 이용할 수 있는 객체(object)로 만들면 그것을 문서 객체라고 합니다. (그럼 html문서의 태그들이 객체에 담긴 상태를 의미하는 것일까요? )
DOM: html문서의 태그들을 JavaScript가 이용할 수 있는 객체(Object)로 만든 것
여기에 Model을 붙였는데 Model이라는 영어 단어에는 모형, 주형이라는 의미도 있고 모듈이라는 의미도 있습니다. 비슷하게 여기서는 문서 객체를 '인식하는 방식'이라고 해석할 수 있습니다.
이제 조금은 명확해 지지 않았나요? 이제 조금 더 명확하게 DOM을 정의해보겠습니다. DOM은 넓은 의미로 웹 브라우저가 HTML 페이지를 인식하는 방식을 의미합니다. 조금 좁은 의미로 본다면 document 객체와 관련된 객체의 집합을 의미할 수도 있습니다.
이제 DOM을 보게 되면 웹 브라우저가 html 페이지를 인식하는 방식을 이야기 하거나 문서 객체(document object)와 관련된 객체의 집합에 관한 이야기라는 것을 쉽게 추측할 수 있습니다.
JavaScript로 문서객체를 생성한다는 것은 어떤 의미인가?문서 객체가 생성되는 방식은 두 가지로 나누어 볼 수 있습니다. 우선 웹 브라우저가 HTML 페이지에 적혀 있는 태그를 읽으면 생성하는 것입니다. 이런 과정을 정적으로 문서 객체를 생성한다고 말합니다. 단순히 적혀져 있는 그대로 문서객체가 생성되는 것을 표현한 것입니다.
반대로 원래 HTML 페이지에 없던 문서객체를 JavaScript를 이용해서 생성할 수 있습니다. 이런 과정을 동적으로 문서객체를 생성한다고 합니다. 따라서 JavaScript로 문서객체를 생성한다는 것은 처음에는 HTML 페이지에 없던 문서객체를 동적으로 생성하는 것이 됩니다.
출처:
'Language > JavaScript' 카테고리의 다른 글
| [JavaScript] 이미지 스프라이트 (0) | 2020.08.31 |
|---|---|
| [JavaScript] 비동기, 동기 (0) | 2020.08.30 |
| [JavaScript] Document (0) | 2020.08.26 |
| [JavaScript] getElementById (0) | 2020.08.24 |
| [JavaScript] 객체의 기본형, 객체의 종류 (0) | 2020.08.21 |
댓글