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 : 창 틀을 포함한 크기이다.