[JavaScript] - DOM과 DOM API

어제 동기와 비동기에 대해 학습했던 데 이어, 오늘은 효빈님의 자바스크립트 강의를 통해 DOM과 DOM API에 대해 복습했다.

DOM은 웹 개발에서 가장 기본적이면서도 중요한 개념 중 하나로, HTML 문서를 자바스크립트로 조작할 수 있도록 구조화한 트리 형태의 객체 모델이다.

이번 복습을 통해 DOM 요소를 선택하고 조작하는 다양한 메서드들, 그리고 이벤트를 연결하는 방식 등

을 다시 한 번 정리할 수 있었다.

🚩 DOM과 DOM API

DOM이란?

DOM(Document Object Model)은 웹 브라우저가 HTML 문서를 해석해 객체 형태로 표현한 구조
HTML의 각 태그는 DOM 트리에서 노드(Node)가 되며, 자바스크립트로 해당 노드에 접근하고 조작할 수 있음

Web이란?

인터넷 상에서 정보를 주고받을 수 있는 시스템
정식 명칭: World Wide Web (WWW)

🧑‍💻 개발자 입장에서 웹이란?

웹은 사용자와 서버를 연결하는 창구
개발자는 이 웹 창구를 통해 정보를 보여주고, 데이터를 주고받고, 사용자와 소통

웹의 구성 요소

HTML: 문서의 구조 (예: 제목, 문단, 버튼 등)
CSS: 문서의 스타일 (예: 색상, 위치, 크기)
JavaScript: 동적인 기능 (예: 클릭 시 메시지 출력)

👉 DOM은 HTML과 JavaScript를 연결해주는 역할을 하며, 웹 페이지를 동적으로 조작할 수 있게 서포트

DOM 트리란?

DOM은 HTML 문서를 트리 구조로 표현
각 요소는 부모-자식 관계를 가지며, 루트는 <html>

DOM API

DOM 트리를 조작하기 위한 브라우저 내장 자바스크립트 함수(메서드)
이를 이용하면 HTML 요소에 접근하고, 추가/삭제하거나 이벤트 등록 가능

DOM 요소 선택 관련 메서드

메서드	설명
getElementById(id)	특정 ID를 가진 요소를 반환
getElementsByClassName(class)	해당 클래스 이름을 가진 요소들 반환 (HTMLCollection)
getElementsByTagName(tag)	해당 태그 이름을 가진 요소들 반환 (HTMLCollection)
querySelector(selector)	CSS 선택자 방식으로 첫 번째 요소 반환
querySelectorAll(selector)	CSS 선택자 방식으로 모든 요소 (NodeList) 반환

document.getElementById('myId');              // ID로 요소 선택
document.querySelector('.myClass');           // CSS 선택자 방식 (첫 번째 요소)
document.querySelectorAll('.myClass');        // 여러 요소 선택 (NodeList)
document.getElementsByClassName('myClass');   // 클래스 이름으로 선택
document.getElementsByTagName('div');         // 태그 이름으로 선택

✅ querySelector와 querySelectorAll은 CSS 선택자 방식이라 매우 직관적

DOM 요소 생성 및 조작 메서드

메서드	설명
createElement(tag)	새 HTML 요소 생성
createTextNode(text)	텍스트 노드 생성
appendChild(node)	부모 요소에 자식 요소 추가
innerHTML	요소 내부의 HTML 내용을 읽거나 변경

// 요소 생성
const newDiv = document.createElement('div');
newDiv.textContent = '새로운 DIV입니다';

// 요소 추가
document.body.appendChild(newDiv);

// 요소 내용 수정
const heading = document.querySelector('h1');
heading.innerHTML = '바뀐 제목입니다';

DOM 이벤트 처리 메서드

메서드	설명
addEventListener(type, callback)	클릭, 입력 등의 이벤트를 감지하고 콜백 함수 실행

const button = document.querySelector('#btn');

button.addEventListener('click', () => {
  alert('버튼이 클릭되었습니다!');
});

💡 이벤트는 자바스크립트에서 사용자와 상호작용하는 핵심 (클릭, 키보드 입력 등)

정리

DOM은 브라우저가 HTML을 해석한 객체 트리 구조
DOM API를 통해 자바스크립트로 HTML 요소를 선택, 수정, 생성 가능

'🆎 Programming Language > JavaScript' 카테고리의 다른 글

📒 [DeepDive][JS] 09장 _ 타입 변환과 단축 평가 (0)	2025.04.19
📒 [DeepDive][JS] 모던 자바스크립트 딥다이브 복습 (1)	2025.04.19
[JavaScript] - 비동기와 API (1)	2025.04.07
Practicial JS) JavaScript의 타입 (0)	2025.03.02
Practicial JS) const & let (0)	2025.03.01