JavaScript/자바 스크립트 기초

DOM이란?

lamarcK 2025. 3. 20. 20:13

DOM(Document Object Model, 문서 객체 모델)은 HTML, XML 문서의 프로그래밍 인터페이스(interface)이다.

간단히 말해, 웹 페이지의 구조와 내용을 계층적인 형태로 구성하고 자바스크립트와 같은 프로그래밍 언어로 접근하고 조작할 수 있도록 해주는 역할을 한다. 혹은 트리 형태로 구성한다고 말할 수도 있다.

 

간단하게 말하면 DOM은 각 요소간의 가계도와 같다.

DOM과 가계도의 공통점

  • 계층적 구조
    • 가계도는 조상에서 자손으로 이어지는 계층적인 구조를 가진다.
    • DOM도 부모 요소에서 자식 요소로 이어지는 계층적인 구조를 가진다.
  • 관계 표현
    • 가계도는 가족 구성원 간의 혈연관계, 혼인관계 등을 나타낸다.
    • DOM은 HTML 요소 간의 포함 관계, 상속 관계 등을 나타낸다.
  • 노드와 연결
    • 가계도의 각 구성원은 노드로 표현되고, 이들은 선으로 연결되어 관계를 나타낸다.
    • DOM의 각 HTML 요소도 노드로 표현되고, 이들은 부모-자식 관계로 연결되어 문서의 구조를 나타낸다.

노드(node)란?

DOM에서 노드(node)는 HTML 또는 XML 문서의 구성 요소를 나타내는 기본 단위이다.

가계도로 비유하자면 할아버지, 아버지, 아들 등 가족 구성원 1명, 1명이 각자 1개의 노드라고 할 수 있다.

마찬가지로 DOM에서는 각 HTML 요소, 텍스트, 주석 등이 각각 1개의 노드라고 할 수 있다.

더보기

DOM 노드의 종류:

  • 요소 노드(Element Node)
    • HTML 태그를 나타낸다. (예: <div>, <p>, <span> 등)
  • 텍스트 노드(Text Node)
    • HTML 요소 내부의 텍스트 내용을 나타낸다.
  • 속성 노드(Attribute Node)
    • HTML 요소의 속성을 나타낸다. (예: id="myDiv")
  • 주석 노드(Comment Node)
    • HTML 주석을 나타냅니다. (예: ``)
  • 문서 노드(Document Node)
    • DOM 트리의 최상위 노드이며, 전체 문서를 나타낸다. (예: document 객체)

정리하자면 DOM이란 웹 페이지의 각 요소를 각각 1개의 노드로 취급하여 가계도 형태로 구조화한 것이라고 할 수 있다.

DOM은 실제로 시각적인 인터페이스가 보이는 것이 아니다.

DOM은 각 요소를 추상적으로 구조화한 것이지 실제로 시각적인 형태로 보이게 만들어진 것은 아니다.

예를 들어 3명의 사람이 있고 이 사람(노드)들이 각각 할아버지 - 아버지 - 아들 관계라는 것을 알고 있지만 다른 누군가가 시각적으로 그것을 바로 알 수 있도록 아들의 몸에 ~의 아들 ~의 손자 식으로 써둔 것이 아니라는 것이다.

DOM의 주요 특징

  • 문서의 구조화된 표현
    • DOM은 HTML 문서를 트리 형태의 구조로 표현한다.
    • 각 HTML 요소는 트리 구조의 노드(node)로 표현되며, 요소 간의 부모-자식 관계를 나타낸다.
  • 프로그래밍 인터페이스
    • 자바스크립트를 사용하여 DOM을 통해 문서의 내용을 읽고 수정, 추가, 삭제할 수 있다.
  • 동적 웹 페이지 구현
    • DOM을 사용하면 사용자의 상호작용에 따라 웹 페이지의 내용을 동적으로 변경할 수 있다.
    • 예를 들어, 버튼 클릭 시 특정 요소의 내용을 변경하거나, 새로운 요소를 추가할 수 있다.

DOM의 역할

  • 웹 페이지 내용 접근 및 수정
    • 자바스크립트를 사용하여 DOM을 통해 HTML 요소의 내용, 속성, 스타일 등을 읽고 수정할 수 있다.
  • 동적 웹 페이지 구현
    • 사용자의 상호작용에 따라 웹 페이지의 내용을 동적으로 변경하여 사용자 경험을 향상시킬 수 있다.
  • 웹 애플리케이션 개발
    • DOM은 웹 애플리케이션 개발의 핵심 기술 중 하나이다.
    • DOM을 통해 웹 애플리케이션의 인터페이스를 동적으로 구성하고 사용자와 상호작용할 수 있다.

DOM의 중요성

  • DOM은 현대 웹 개발에서 필수적인 기술이다.
  • DOM을 이해하고 활용하면 동적이고 상호작용적인 웹 페이지 및 웹 애플리케이션을 개발할 수 있다.
  • DOM은 웹 브라우저가 HTML 페이지를 인식하는 방식이며, document 객체와 관련된 객체의 집합이다.

DOM 예시

예를 들면 우리가 웹페이지를 사용할 때 특정 버튼을 누르면 웹페이지의 형태가 동적으로 바뀌는 것을 본적이 있을 것이다.

아래처럼 화살표를 누르면 다음 페이지로 이동한다든지 스포츠 버튼을 누르면 스포츠 섹션으로 이동한다든지 하는 것 말이다.

 

실제로 간단하게 구현하면 다음과 같다.

더보기 
<!DOCTYPE html>
<html>
<head>
  <title>뉴스 스탠드</title>
  <style>
    .news-section {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
    }
    .news-item {
      width: 150px;
      height: 100px;
      border: 1px solid #ccc;
      margin: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .pagination {
      text-align: center;
      margin-top: 20px;
    }
    
  </style>
</head>
<body>
  <button id="sportsButton">스포츠</button>
  <button id="enterButton">엔터</button>

  <div id="content">
    <div class="news-section" id="newsSection"></div>
    <div class="pagination" id="pagination"></div>
  </div>

  <script src="script.js"></script>
</body>
</html>

 

// DOM 요소들을 변수에 저장
const contentDiv = document.getElementById("content"); // 전체 콘텐츠를 감싸는 div 요소
const newsSection = document.getElementById("newsSection"); // 뉴스 목록을 표시할 div 요소
const pagination = document.getElementById("pagination"); // 페이지 이동 버튼을 표시할 div 요소

// 뉴스 데이터를 객체 형태로 저장
const newsData = {
  sports: ["스포츠뉴스1", "스포츠뉴스2", "스포츠뉴스3", "스포츠뉴스4", "스포츠뉴스5", "스포츠뉴스6"], // 스포츠 뉴스 데이터
  enter: ["엔터뉴스1", "엔터뉴스2", "엔터뉴스3", "엔터뉴스4", "엔터뉴스5", "엔터뉴스6"], // 엔터 뉴스 데이터
};

// 현재 페이지, 페이지당 아이템 수, 현재 카테고리 변수 초기화
let currentPage = 1; // 현재 페이지 번호
const itemsPerPage = 6; // 페이지당 표시할 아이템 수
let currentCategory = "sports"; // 현재 선택된 카테고리 (초기값: 스포츠)

// 뉴스 목록을 표시하는 함수
function displayNews(category, page) {
  newsSection.innerHTML = ""; // 뉴스 목록 초기화
  const startIndex = (page - 1) * itemsPerPage; // 시작 인덱스 계산
  const endIndex = startIndex + itemsPerPage; // 종료 인덱스 계산
  const currentNews = newsData[category].slice(startIndex, endIndex); // 현재 페이지에 표시할 뉴스 데이터 추출

  // 추출된 뉴스 데이터를 기반으로 뉴스 아이템 생성 및 추가
  currentNews.forEach(news => {
    const newsItem = document.createElement("div"); // div 요소 생성
    newsItem.className = "news-item"; // 클래스 이름 설정
    newsItem.textContent = news; // 텍스트 내용 설정
    newsItem.style.backgroundColor = category === "sports" ? "#e0f7fa" : "#fff3e0"; // 카테고리에 따라 배경색 설정
    newsSection.appendChild(newsItem); // 뉴스 아이템을 뉴스 목록에 추가
  });

  displayPagination(category); // 페이지 이동 버튼 표시
}

// 페이지 이동 버튼을 표시하는 함수
function displayPagination(category) {
  pagination.innerHTML = ""; // 페이지 이동 버튼 초기화
  const totalPages = Math.ceil(newsData[category].length / itemsPerPage); // 전체 페이지 수 계산

  // 페이지 이동 버튼 생성 및 이벤트 핸들러 추가
  for (let i = 1; i <= totalPages; i++) {
    const pageButton = document.createElement("button"); // 버튼 요소 생성
    pageButton.textContent = i; // 버튼 텍스트 설정
    pageButton.addEventListener("click", () => { // 클릭 이벤트 핸들러 추가
      currentPage = i; // 현재 페이지 번호 변경
      displayNews(category, currentPage); // 뉴스 목록 업데이트
    });
    pagination.appendChild(pageButton); // 페이지 이동 버튼을 페이지 이동 버튼 영역에 추가
  }
}

// 스포츠 버튼 클릭 이벤트 핸들러
document.getElementById("sportsButton").addEventListener("click", function() {
  currentCategory = "sports"; // 현재 카테고리 변경
  currentPage = 1; // 현재 페이지 초기화
  displayNews(currentCategory, currentPage); // 뉴스 목록 업데이트
});

// 엔터 버튼 클릭 이벤트 핸들러
document.getElementById("enterButton").addEventListener("click", function() {
  currentCategory = "enter"; // 현재 카테고리 변경
  currentPage = 1; // 현재 페이지 초기화
  displayNews(currentCategory, currentPage); // 뉴스 목록 업데이트
});

displayNews(currentCategory, currentPage); // 초기 로딩 시 스포츠 뉴스 표시

스포츠와 엔터 버튼을 통해서 섹션을 이동할 수 있도록 했다.

DOM은 이미 만들어진 레이아웃의 일부를 수정하는 것에 효과적이다.

결국 DOM이란 이미 만들어진 웹페이지의 레이아웃 일부를 동적으로 바꾸는 기술이라고도 할 수있다. 실제로 뉴스 페이지를 만들 때 스포츠와 엔터 섹션이 있다면 각각의 페이지를 따로 만들어서 페이지 간의 이동을 하는 것보다 섹션 부분의 코드만 살짝 변경하는 것이 훨씬 효과적이다.

이렇게 특정 부분만 바꾸는 것이 DOM의 역할 중 부분 업데이트와 동적 웹페이지의 구현이라고 할 수 있다.

 

마찬가지로 탭 메뉴, 검색 결과, 댓글 기능, 애니메이션 효과 등을 부여하는 것도 가능하다.

  • 탭 메뉴:
    • 탭 메뉴를 클릭하면 해당 탭의 내용만 표시하고 다른 탭의 내용은 숨길 수 있습니다.
  • 검색 결과:
    • 검색어를 입력하면 검색 결과를 동적으로 표시하고 필터링할 수 있습니다.
  • 댓글 기능:
    • 댓글을 작성하면 댓글 목록에 새로운 댓글을 추가하고 실시간으로 업데이트할 수 있습니다.
  • 애니메이션 효과:
    • DOM과 CSS를 함께 사용하여 웹 페이지 요소에 애니메이션 효과를 적용할 수 있습니다.

아래 검색창도 X 버튼을 눌러서 내용 삭제, 전체 삭제 버튼으로 내용 전부 삭제, 닫기 버튼을 눌러서 최근 검색어 끄기, 자동 저장 끄기를 눌러서 설정 변경, 도움말을 눌러서 새로운 신규 웹페이지 실행 등 다양한 DOM적 요소가 들어있다.