DOM (Document Object Model, 문서 객체 구조)
DOM 특징
브라우저들은 사용자가 띄운 웹 문서를 구성과 내용에 맞게 객체화한다.
각 요소(element)별로 구조화한다.
이 요소들은 상, 하위 구조나 병렬 구조로 체계화된다.
웹 문서에 대한 모든 내용을 담고있는 객체이다.
DOM은 JS를 통해 dynamic하게 변경 가능하다.
DOM은 HTML 문서를 node tree로 나타낸다.
NODE : 트리 구조에서 데이터 상,하위 계층을 나타내는 위치의 항목.
DOM을 통한 요소 접근 방식
getElementById, getElementByTagName, getElementByClassName, querySelector
DOM Tree 구조에서 자주 사용되는 노드
문서 노드 (Document Node)
트리 최상위에 존재하며 하위 요소들에 접근하기 위한 starting point.
요소 노드 (Element Node)
TAG
어트리뷰트 노드 (Attribute Node)
Input 태그 안에 name, value 등의 속성을 가리키는 노드
텍스트 노드 (Text Node)
DOM 트리의 최종단.
BOM (Browser Object Model, 브라우저 객체 모델)
BOM의 정의
웹페이지 내용을 제외한 브라우저 창에 포함된 모든 객체 요소.
Window 객체를 통한 접근 방식
Window 객체
웹 브라우저 창을 나타내는 객체이고 대부분의 웹 브라우저에서 지원한다.
Window 객체 메소드는 전역 함수이다.
브라우저 창 크기 조절
브라우저 창 = viewport
innerHeight, innerWidth 프로퍼티로 브라우저 창 크기를 조절할 수 있다.
브라우저 새 창 열기
window.open()
브라우저 창 닫기
현재 브라우저나 특정 브라우저 창을 닫을 수 있다.
window.close()
Location 객체
현재 브라우저에 표시된 HTML 문서의 주소를 얻거나 새 문서를 불러올 때 사용한다.
현재 문서의 URL 주소 : location.href
현재 문서의 호스트 이름 : location.hostname
현재 문서의 파일 경로명 : location.pathname
History 객체
브라우저 히스토리 정보를 문서와 문서 상태 목록을 저장하는 객체
히스토리 목록 개수 : history.length
히스토리 목록 접근
back 메소드 : 브라우저 히스토리 목록에서 바로 이전 URL로 이동 (window.history.back())
forward 메소드 : 브라우저 히스토리 목록에서 바로 다음 URL로 이동 (window.history.forward())
Screen 객체
사용자 디스플레이 화면에 다양한 정보 저장
사용자 화면 크기 : 사용자의 디스플레이 화면의 크기를 pixel 단위로 반환 (screen.width, screen.height)
현재 브라우저 창 크기 : window.outerWidth, window.outerHeight
번외
(innerWidth & innerHeight) vs (outerWidth & outerHeight)
innerWidth와 innerHeight : 창 틀을 뺀 내용과 스크롤을 포함한 크기이다.
outerWidth와 outerHeight : 창 틀을 포함한 크기이다.
