DOM? BOM? ( feat. CSSOM )

JavaScript를 접하면서 DOM이란 용어를 많이 접해보았을 것이다. 단순히 브라우저의 HTML요소에 접근할 수 있는 것이라고만 알고 있었는데 오늘 한번 정의를 해보려고 한다.

 

 DOM이란 ? 🚕 

 

JS는 웹문서를 제어하기 위해 개발된 언어이다. 

document.querySeletor('h1').textContent = '제목'

위와 같이 컨텐츠 내용을 변경한다던지  HTML요소를 추가하거나 제거하는 등

JS는 HTML문서를 조작하기 위해 만들어진 언어이다.

 

HTML파일을 JS로 어떻게 제어를 할 수 있을까?? 

각 브라우저 ( 크롬, 엣지 등 )들은 웹문서를 해석할 수 있는 렌더링 엔진이 존재한다.

브라우저로 HTML파일을 열게되면 이 렌더링 엔진이 HTML로 작성된 문서를 위에서 부터 차례대로 하나씩 읽어들이면서

다 읽으면 그 HTML문서를 객체화 시켜 JS로 접근할 수 있도록 해준다.

 > 문서를 객체화 했다 하여 DOM이라 불린다. (Document Object Model)

 

다시말하여 DOM은 Document Object Model의 약자로 JS로 HTML요소를 제어할 수 있도록 웹문서를 객체화 한 것을 말한다. 이 DOM은 tree 구조를 가지고 있다. ul 안에 li 태그가 들어있는 것처럼 하나의 부모안에 N개의 자식이 들어있는 구조이다.

 

DOM Tree

이 것을 DOM Tree라고 하며 각각의 요소를 노드라고 한다. JS를 통해 각각의 노드에 접근하여 제어할 수 있게 되는 것이다.

 

 BOM 🚄

웹문서를 객체화 한 것을 DOM이라고 한다면 브라우저 자체를 객체화 한 것은 BOM이라고 한다. ( Browser Object Model )

객체화한 이유는 브라우저를 스크립트로 제어하기 위함이다. 

마우스를 사용하여 브라우저의 새 탭을 킬 수 있다. 또 주소창에 다른 주소를 입력함으로써 다른 페이지로 이동할 수 있다.

이렇게 마우스로 브라우저의 기능을 이용하는 것 처럼, 이 브라우저를 객체화 함으로써 자바스크립트로도 제어가 가능한 것이다.

 

• window : 모든 객체가 소속된 객체이며 브라우저 창 자체를 의미한다.
• document : 현재문서에 대한 정보를 갖고있는 객체이다.
• history : 현재 브라우저가 접근했던 URL history를 제어할 수 있다.
• location : 문서의 주소와 관련된 객체로 window객체의 프로퍼티인 동시에 document의 프로퍼티이다. 이 객체를 이용하여 윈도우의 문서 URL을 변경할 수 있고, 문서의 위치와 관련하여 다양한 정보를 얻을 수 있다.
• screen : 사용자의 디스플레이 화면에 대한 다양한 정보를 갖고있는 객체이다.
• navigator : 실행중인 애플리케이션(브라우저)에 대한 정보를 알 수 있다. 크로스 브라우징 이슈를 해결할 수 있다.
  • navigator.geolocation.getCurrentPosition() 현재 애플리케이션에 대한 위치정보
  • navigator.appName 앱 이름을 반환한다.
  • navigator.appVersion 앱에 대한 버전정보를 반환한다.
  • navigator.userAgent 서버에 요청할 때 앱(브라우저)에 대한 정보이다.

브라우저 객체의 종류에는 위와 같은 객체들이 존재한다.

window 객체를 사용하여 window.open('url address'), window.close() 브라우저 자체를 생성 제거할 수 있고, 우리가 자주 사용해왔던 alert('내용') 도 사실은 window.alert의 줄임이었다. 앞의 window는 생략이 가능했기에 alert만으로도 사용이 가능했던 것이다. 

 

history.back() 하면 브라우저에서 전에 있던 url로 이동한다. 

history.forward() 하면 앞으로 이동한다.

 

location은 window.location으로 사용할 수도 있고, document.location으로도 사용할 수 있다.

location.host 라고 하면 현재 브라우저의 host를 가져올 수 있다 ( 'www.naver.com' )

location.href = 'google.com'을 적으면 현재 브라우저가 구글로 변경이 된다. 

이렇듯 location객체는 웹 문서 URL의 정보를 가지고 있다.

 

screen은 어디서 보냐에 따라 ( 휴대폰, 노트북 ) 객체의 값이 바뀐다.

console.dir(screen)을 하면 현재 디스플레이 사이즈 등 다양한 정보를 가져올 수 있다.

 

CSSOM 🚀

마찬가지로 CSS를 JS로 조작할 수 있도록 한 것을 CSSOM 이라고 한다. ( CSS Object Model )

 

 

 

DOM 조작 🚋

BOM에는 웹문서 영역을 제어할 수 있도록 제공하는 객체가 있다.

바로 document이다. 

웹 페이지 자체를 의미하여 DOM Tree의 최상위 노드이다. 이 객체로 원하는 HTML요소에 접근할 수 있다.

다시 말하여 DOM요소에 접근하기 위한 진입점이라고 생각하면 된다.

 

document.querySeletor('h1').textContent = '제목'

 

위에서 사용한 문장이다. document객체로 DOM객체에 접근 한 뒤 DOM객체에서 지원하는 프로퍼티로 제어를 할 수 있는 것이다.