[JavaScript] DOM & BOM

in JavaScript

JavaScript의 DOM과 BOM에 대해 알아보자.

DOM (Document Object Model)

  • 웹페이지의 HTML을 트리 구조로 표현한 객체 모델
    • document객체를 통해 접근 가능
    • 루트 노드는 항상 document 객체
  • JavaScript를 통해 브라우저에서 웹 페이지를 동적으로 문서를 조작할 수 있게 하는 API
    • 요소를 추가, 수정, 삭제 가능
  • 필요한 이유
    • 웹 페이지 내용 동적으로 변경 가능
    • 사용자 입력에 따라 인터랙티브한 기능 추가
    • HTML 요소를 추가, 수정, 삭제 가능
    • CSS 스타일을 JavaScript로 변경 가능
    • 이벤트 핸들링(클릭, 키보드 입력 등) 가능

DOM 기본 구조

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1 id="title">Hello, DOM!</h1>
    <p class="text">This is a paragraph.</p>
  </body>
</html>
  • 이 HTML 문서는 DOM 트리 구조로 변환됨
Document
 ├── <html>
 │   ├── <head>
 │   │   └── <title>My Page</title>
 │   ├── <body>
 │   │   ├── <h1 id="title">Hello, DOM!</h1>
 │   │   └── <p class="text">This is a paragraph.</p>

  • DOM 조작 예제 (JavaScript)

    • // 요소 선택
let title = document.getElementById("title"); // <h1> 요소 선택
let text = document.querySelector(".text"); // <p> 요소 선택

// 요소 내용 변경
title.innerText = "Hello, World!";
text.innerHTML = "<b>Updated paragraph!</b>";

// 요소 스타일 변경
title.style.color = "blue";

// 요소 추가
let newParagraph = document.createElement("p");
newParagraph.innerText = "This is a new paragraph!";

DOM의 특징

  • 주요 속성 및 메서드
    • document.body
      • 문서의 <body> 요소 반환
    • firstElementChile, lastElementChild
      • 첫 번째와 마지막 자식 요소를 반환
    • children
      • 모든 자식 요소의 컬렉션을 반환

DOM을 활용한 사례

  • 동적 리스트 추가

  • html

    • <ul id="itemList"></ul>
<button id="addItem">Add Item</button>

  • javascript

    • let button = document.getElementById("addItem");
let list = document.getElementById("itemList");

button.addEventListener("click", function () {
  let newItem = document.createElement("li");
  newItem.innerText = "New Item";
  list.appendChild(newItem);
});

BOM (Browser Object Model)

  • 브라우저 창과 관련된 객체를 제공하는 모델

    웹페이지가 아닌 브라우저 자체를 제어할 수 있도록 해주는 API

BOM의 특징

  • 웹 브우저 창, URL, 히스토리, 콘솔 등을 조작 가능
  • window 객체를 통해 접근 가능
  • 대표적인 BOM 객체
    • window -> 브라우저 창 전체
    • navigator -> 브라우저 정보
    • location -> 현재 URL 정보
    • history -> 방문 기록 관리
    • screen -> 디바이스 화면 정보

BOM 주요 객체 사용 예제

  1. window
  • console.log(window.innerWidth); //현재 브라우저 창 너비
console.log(window.innerHeight);

window.alert("This is an alert!");
  1. navigator
  • console.log(navigator.userAgent); //사용자 브라우저 정보
console.log(navigator.language); //사용 언어
  1. histofy
  • history.back(); //이전 페이지로 이동
history.forward(); //다음 페이지로 이동

DOM과 BOM의 차이점

비교 항목DOMBOM
역할HTML 문서를 객체로 표현하여 조작브라우저 창과 관련된 기능 제공
중심 객체document 객체window 객체
조작 대상HTML 요소, 스타일, 속성브라우저 창, URL, 히스토리, 화면 정보
사용 예시<div>, <p> 등의 조작새 창 열기, 페이지 이동, 알림 띄우기
주요 메서드.getElementById(), .querySelector(), .innerTextalert(), location.href, history.back()