웹개발/JavaScript

JavaScript - DOM(Document Object Model)

bergerac 2025. 4. 9. 09:11

DOM이란?

DOM은 Document Object Model의 약자입니다. 웹 페이지의 HTML 문서를 객체(Object)처럼 다룰 수 있도록 해주는 프로그래밍 인터페이스입니다.

HTML의 각 요소는 JavaScript에서 객체로 인식됩니다. 이 객체들을 활용해 요소를 선택하고, 수정하고, 삭제하거나, 새롭게 생성하는 등 다양한 조작이 가능합니다. 쉽게 말해, JavaScript에서 HTML 요소를 **문서 객체(document object)**로 다룬다고 보면 됩니다.

DOM 사용 방법

OM은 기본적으로 다음과 같은 CRUD 작업에 사용됩니다:

  • Create: 새로운 요소 생성
  • Read: 기존 요소 선택 및 읽기
  • Update: 요소의 내용이나 속성 수정
  • Delete: 요소 삭제

이러한 작업은 DOM에서 제공하는 메서드와 속성을 통해 이루어집니다.

 

DOM 조작의 기본 흐름

DOMContentLoaded 이벤트

DOM 조작은 문서의 모든 HTML 구조가 로드된 뒤에 실행하는 것이 중요함. 이를 위해 DOMContentLoaded 이벤트를 사용

document.addEventListener('DOMContentLoaded', () => {
  // DOM 조작은 여기서 시작!
});

이 이벤트는 HTML문서의 파싱이 완료되었을 때 실행되므로, DOM요소를 안전하게 다룰 수 있다.

 

DOM 요소 선택하기

HTML요소를 선택하는 다양한 방법이 존재하며, 상황에 따라 적절한 메서드를 선택하여 사용

1. document.querySelector()

선택자(selector)를 사용하여 가장 처음 일치하는 요소 하나를 반환

const header = document.querySelector('h1');

선택자에는 태그, 클래스, 아이디 등을 반환한 수 있다.

2. document.querySelectorAll()

해당 선택자에 일치하는 모든 요소들을 배열처럼 반환합니다.

const items = document.querySelectorAll('li');
items.forEach(item => {
  item.textContent = 'LIST ITEM';
});

3. document.getElementById()

ID 속성을 기준으로 요소를 선택합니다. ID는 HTML 문서 내에서 고유해야 하며, 앞에 # 없이 문자열만 전달합니다.

const divElement = document.getElementById('getElementById');
divElement.classList.add('special');

 

텍스트 조작하기

text content : 텍스트 그대로 삽입, 태그로 인식하지않고 문자열 처리

element.textContent = '<h2>텍스트</h2>'; // → 그대로 출력

innerHTML : HTML 태그로 해석되며 문서 구조로 삽입

element.innerHTML = '<h2>태그로 삽입</h2>';

 

속성(Attribute) 조작하기

HTML 요소의 속성은 다음과 같은 방식으로 조작할 수 있습니다.

setAttribute(name, value): 지정한 속성에 값을 설정합니다.

element.setAttribute('src', 'image.jpg');

getAttribute(name) : 속성의 값을 가져옵니다.

const src = element.getAttribute('src');
element.src = 'image.jpg';
element.alt = '대체 텍스트';

스타일 조작하기

스타일을 조작할 때는 style 속성을 사용합니다. 하이픈(-)으로 구분되는 CSS 속성은 lowerCamelCase로 변환해서 사용해야 합니다.

element.style.backgroundColor = 'black';
element.style.fontSize = '16px';

혹은 아래와 같이 속성명을 문자열로 접근도 가능

element.style['backgroundColor'] = 'gray';

문서 객체 생성 및 배치

새로운 요소를 생성할 때에는 createElement() 메서드를 사용한다.

const header = document.createElement('h1');
header.textContent = '동적으로 생성된 요소';
document.body.appendChild(header);

사용자 정의 속성 : 요소에 사용자 정의 속성을 추가도 가능

header.setAttribute('data-custom', '나만의 속성');

문서 객체 이동

appendChild()는 단순히 추가뿐 아니라 요소를 이동시키는 역할도 합니다. 한 문서 객체는 오직 하나의 부모만 가질 수 있으므로, 다른 부모에 추가하면 자동으로 기존 위치에서 이동합니다.

divA.appendChild(h2); // divA로 이동
divB.appendChild(h2); // divB로 이동

문서 객체 제거

문서 객체를 삭제할 때는 removeChild()를 사용합니다. 단, 반드시 부모 객체에서 삭제해야 하므로, parentNode를 통해 접근합니다.

const h3 = document.querySelector('h3');
h3.parentNode.removeChild(h3);