[JS] DOM / BOM

DOM

01) DOM이란?

• Document Object Model 문서 객체 모델
• 스크립트 언어로 html 요소를 제어할 수 있도록 웹 문서를 객체화한 것
• 브라우저에서 자바 스크립트로 html 요소를 제어할 수 있도록 제공하는 api
• DOM은 트리(Tree) 구조를 가지고 있음

02) DOM의 트리 구조

• 노드 : 트리 구조 안 각각의 요소
• document : 웹 문서 영역을 제어할 수 있게 제공하는 객체로, 웹 페이지 자체이자 돔 트리의 최상위 노드
• document.getRootNode() : 최상위 노드인 '#document'를 반환함

03) 그 외 Object Model

• CSS Object Model : css를 Javascript로 조작할 수 있도록 한 것

 

BOM

01) BOM이란?

• Browser Object Model 브라우저 객체 모델
• 브라우저를 스크립트 언어로 제어할 수 있도록 모델링한 것
• 브라우저를 제어하기 위한 인터페이스

02) BOM 종류

• window : 모든 객체가 소속된 객체이며, 브라우저 창 자체를 의미로 생략이 가능함
  

  window.alert('Hello!'); 
  alert('Hello!'); // window를 생략 가능

• document : 현재 문서에 대한 정보를 갖고 있는 객체
  

  document.querySelector('#id').textContent = 'id의 텍스트 변경';

• history : 현재의 브라우저가 접근했던 URL history를 제어 (ex. 뒤로가기 버튼)
  

  history.back(); // 뒤로 가기
  history.forward(); // 앞으로 가기

• location : window 객체의 프로퍼티인 동시에 document의 프로퍼티로, 문서 URL 변경 및 위치와 관련한 정보를 얻을 수 있음
  

  // window, document 둘 다 사용 가능
  window.location
  document.location
  
  // 웹 문서 URL 정보 가져오기
  location.host
  
  // 웹 문서 주소 변경
  location.href = '변경할 주소 입력'

• screen : 사용자의 디스플레이 화면에 대한 정보를 가지고 있는 객체
  

  // 현재 디스플레이 정보
  console.dir(screen)

• navigator : 실행 중인 애플리케이션에 대한 정보를 알 수 있음
  

  // 현재 애플리케이션에 대한 위치 정보
  navigator.geolocation.getCurrentPosition()
  
  // 앱(브라우저) 이름
  navigator.appName
  
  // 앱(브라우저) 버전 정보
  navigator.appVersion
  
  // 서버에 요청할 때 앱(브라우저)에 대한 정보
  navigator.userAgent

 

• console.log : 텍스트를 효율적으로 출력할 수 있음
• console.dir : 객체를 효율적으로 출력할 수 있음

    - 더 자세한 사항은 🔗사이트 참고