개발/JavaScript

[JavaScript] Window 객체란? (BOM, DOM)

뉴NEW 2022. 9. 20. 23:06

Window 객체: 웹브라우저 창의 생성, 소멸, 크기 등을 제어하는 객체

- BOM DOM의 상위(부모) 객체

BOM (Browser Object Model) 웹브라우저를 조작하는 다양한 객체

- location, history, navigator, screen

DOM (Document Object Model) 웹브라우저의 내용(html, css)을 조작하는 객체 ★★★★★

- document 객체


< DOM 객체 >

- Document Object Model

- document 객체 - 문서를 제어하는 객체

- 웹페이지의 내용(html,css)를 제어하는 객체

 

< DOM 객체의 역할 >

- 웹페이지의 모든 요소(태그)의 내용, 속성, css스타일을 변경

- 웹페이지에 새로운 내용 추가, 삭제, 변경

- 웹페이지에 대한 이벤트를 생성하고 처리

 

< DOM tree >

- HTML 문서의 구조를 tree형태로 접근할 수 있도록 하는 정보의 집합

- Live DOM Viewer

 

< BOM 객체 >

1. history 객체: 현재 웹페이지의 히스토리 정보를 제공하는 객체

2. 히스토리의 이동

- history.back() 히스토리 기반으로 이전 페이지로 이동

- history.forward() 히스트리 기반으로 다음 페이지로 이동

- history.go(정수) 히스토리 기반으로 이전or다음 페이지로 이동

  ex) history.go(1) 다음 페이지

        history.go(2) 두 페이지 다음

        history.go(-1) 이전 페이지

        history.go(-2) 두 페이지 이전

- history.length: 히스토리의 개수