[Javascript] DOM, BOM

2024. 9. 7. 02:12·Back-End/Front-End

[작성일: 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로 바꾸되 이전 페이지로 돌아가기는 불가능함.

 

 

 

 

 

 

 

 

 

 


🐣 해당 게시글은 입문 개발자가 요약/정리한 글이므로 틀린 내용이나 오타가 있을 수 있습니다.

 

저작자표시 비영리 변경금지 (새창열림)
'Back-End/Front-End' 카테고리의 다른 글
  • [Javascript] Ajax
  • [Javascript] jQuery
  • [Javascript] 함수와 객체
  • [Javascript] Day2
뚜비
뚜비
1년차 백엔드&iOS 개발자의 감자 탈출 블로그 🥔🥔
  • 뚜비
    뚜비의 개발로그
    뚜비
  • 전체
    오늘
    어제
  • 글쓰기     관리
    • Devlog
      • Back-End
        • Java
        • Spring
        • JPA
        • HTTP
        • Security
        • Back-End
        • Front-End
      • 알고리즘
      • iOS
        • Swift
      • Database
      • Tips
        • Git & GitHub
        • A to Z
      • 프로젝트
      • 생각정리
  • 태그

    MVC
    변수
    sql
    김영한
    자바
    스프링
    알고리즘
    html
    Spring Security
    HTTP
    JPA
    프로그래머스
    백준
    jsp
    최주호
    Database
    객체
    의존성주입
    DB
    게시판만들기
    Security
    생성자
    javascript
    다형성
    성능최적화
    Java
    자바스크립트
    데이터베이스
    spring
    Swift
  • hELLO· Designed By정상우.v4.10.0
뚜비
[Javascript] DOM, BOM
상단으로

티스토리툴바