[작성일: 2023. 03. 03]
DOM(Document Object Model)
- HTML 태그들을 하나씩 오브젝트화 한 것
- HTML 페이지의 내용과 모양을 제어하기 위해 사용되는 객체
- HTML 태그 당 DOM 객체가 하나씩 생성
- HTML 태그의 포함관계에 따라 Parent-Child 관계로 구성 됨.
BOM(Browser Object Model)
- 자바스크립트를 이용하면 브라우저의 정보에 접근하거나 기능을 제어 가능함.
- 이 때 사용하는 객체 모델을 BOM이라고 부름
- DOM은 W3C의 표준이지만 BOM은 아님.
- 자바스크립트가 브라우저의 기본적인 기능 요소를 직접 제어하고 관리하는 방법을 제시함.
Window 객체
- 웹 브라우저의 창을 나타내는 객체로 대부분의 브라우저에서 지원함.
- 자바스크립트의 모든 객체, 전역 변수, 전역 함수들은 자동으로 window 객체의 프로퍼티가 됨.
Window.onload = function() {}
- 스크립트 언어는 위에서 아래로 수행되기 때문에 DOM에서 HTML 요소를 추출할 때, body 보다 위에 있으면 해석 순서에서 오류가 발생할 수 있음.
- window.onload를 사용하면 문서가 준비된 상황 이후에 발동시킬 수 있음.
Window.open()
- window 객체의 open을 이용하면 새로운 브라우저 창을 열 수 있으며, 새 브라우저 창의 옵션 설정이 가능함.
var 객체명 = window.open(url, name, spec)- 객체명
- 성공하면 새로 만든 창 객체, 실패하면 null
- 객체명을 가지고 새 창을 제어할 수 있음.
- 객체명.close()로 창을 닫을 수 있음.
- url은 이동할 주소
- name
- _blank : 기본, 새 창
- _parent : 부모 프레임
- _self : 현재 페이지
- _child : 현재 페이지의 서브 페이지(서브 창)
- spec : 창의 크기, 스크롤 가능 여부, 리사이즈 가능 여부
- height = 픽셀, width = 픽셀
location 객체
- 현재 브라우저에 표시된 HTML의 주소를 얻거나 브라우저의 새 문서를 불러올 때 사용가능
- location 객체의 프로퍼티(속성)과 메서드를 이용하면 현재 문서의 URL을 다양하게 해석하여 처리 가능함.
- href : 페이지의 전체 URL 반환하며 URL을 지정하여 페이지 이동도 가능함.
- pathname : URL 경로 부분의 정보를 반환
- port : 포트번호
- reload() : 새로고침
- assign : 현재 URL을 지정한 URL로 바꿔서 페이지 이동
- replace() : 현재 URL을 지정한 URL로 바꾸되 이전 페이지로 돌아가기는 불가능함.
🐣 해당 게시글은 입문 개발자가 요약/정리한 글이므로 틀린 내용이나 오타가 있을 수 있습니다.