DOM 과 BOM 차이
BOM(Browser Object Model) 이란?
- Web Browser와 관련된 객체의 집합
- Web Browser 기능 요소를 직접 제어할 수 있는 객체 모음
- 객체의 모델의 종류 : window(location,navigator, history, screen, document) 가 있다.
자주 사용하는 Browser 내장 객체
- window : Browser 창 안에 존재하는 모든 요소의 최상위 객체
- location : 현재 페이지에 대한 URL 정보를 가지고 있는 객체
- navigator : 현재 사용 중인 Web Browser 정보를 가지고 있는 객체
- history : 사용자 방문 기록을 저장하고 있는 객체
- screen : 현재 사용 중인 화면 정보를 다루는 객체
- document : 웹 문서에서 <body> 태그를 만나면 만들어 지는 객체이며 HTML 문서 정보를 가지고 있다.
DOM(Document Object Model) 이란?
- Browser 사용자가 보고있는 웹문서의 구성과 내용에 맞게 객체화 하여 각 요소(텍스트,이미지,버튼)를 구조화 합니다.
- 이 요소들은 트리구조로 체계화 되는데 웹 문서(document)에 대한 모든 내용을 담고 있는 객체를 DOM이라 합니다.
자주 사용하는 Document 내장 객체
- querySelector : css 셀렉터를 사용하여 요소 노드 한개 선택한다.
- getElementById(id) : id 어트리뷰트 값으로 요소 노드 한개를 선택한다.
- getElementsByClassName(class) : class 어트리뷰트 값으로 요소 노드를 모두 선택한다.
- getElementsByTagName(tagName) : tag명으로 요소 노드를 모두 선택한다.
DOM과 BOM 차이
DOM은 document, 웹 문서에 대한 제어와 변경을 하고 BOM은 window 속성에 속하여 document가 아닌 window를 제어를 합니다.