[Javascript]자바스크립트 DOM 마스터하기: 초보자를 위한 완벽 가이드

728x90

SMALL

웹 개발을 하다 보면 "DOM"이라는 용어를 자주 접하게 됩니다. DOM(Document Object Model)은 웹 페이지의 구조를 객체로 표현한 모델로, 자바스크립트를 사용하여 웹 페이지를 동적으로 조작할 수 있게 해 줍니다. 예를 들어, 사용자가 버튼을 클릭했을 때 새로운 내용을 추가하거나, 입력된 데이터를 실시간으로 검증하는 등의 작업이 가능합니다.

DOM을 이해하고 활용하는 것은 웹 개발의 기본이자 필수 요소입니다. 이번 포스팅에서는 자바스크립트 DOM의 기본 개념부터 실습 예제까지 단계별로 자세히 설명하여, 여러분이 DOM을 자유자재로 다룰 수 있도록 도와드리겠습니다.

≣ 목차

자바스크립트 DOM이란?🌐
기본 개념: DOM 구조와 노드🌳
DOM 접근하기🔍
DOM 조작하기🛠️
이벤트 핸들링 🎉
DOM 조작 실습 예제📝
최적화 및 성능 팁🚀

01. 자바스크립트 DOM이란?🌐

DOM(Document Object Model)은 웹 페이지를 구조화하여 각 요소를 객체로 표현한 모델입니다. 자바스크립트를 사용하면 DOM을 동적으로 조작하여 웹 페이지의 내용을 실시간으로 변경할 수 있습니다. 예를 들어, 사용자가 버튼을 클릭했을 때 화면에 새로운 내용을 추가하거나, 입력한 데이터를 검증하는 등의 작업이 가능합니다.

02. 기본 개념: DOM 구조와 노드🌳

DOM은 트리 구조로 이루어져 있으며, 각 요소를 '노드(Node)'라고 부릅니다. 주요 노드 타입은 다음과 같습니다:

요소 노드(Element Node): HTML 태그를 나타냅니다.
텍스트 노드(Text Node): 텍스트를 나타냅니다.
주석 노드(Comment Node): 주석을 나타냅니다.

DOM 트리의 예시를 보겠습니다.

<!DOCTYPE html>
<html>
  <body>
    <h1>안녕하세요</h1>
    <p>여기는 DOM 트리 예시입니다.</p>
  </body>
</html>

위의 HTML 문서의 DOM 트리는 다음과 같이 표현됩니다.

html
 └── body
      ├── h1
      │    └── 텍스트 노드: "안녕하세요"
      └── p
           └── 텍스트 노드: "여기는 DOM 트리 예시입니다."

03. DOM 접근하기🔍

자바스크립트로 DOM에 접근하는 방법은 여러 가지가 있습니다. 대표적인 방법들을 살펴보겠습니다.

document.getElementById(): id 속성을 사용하여 요소를 찾습니다.

const header = document.getElementById('header');

document.querySelector()와 document.querySelectorAll(): CSS 선택자를 사용하여 요소를 찾습니다.

const firstParagraph = document.querySelector('p');
const allDivs = document.querySelectorAll('div');

getElementsByClassName()와 getElementsByTagName(): 클래스명이나 태그명을 사용하여 요소를 찾습니다.

const items = document.getElementsByClassName('item');
const paragraphs = document.getElementsByTagName('p');

04. DOM 조작하기🛠️

DOM을 조작하는 방법도 여러 가지가 있습니다. 새로운 요소를 추가하거나, 기존 요소를 삭제하거나, 요소의 속성을 변경할 수 있습니다.

노드 생성과 추가

const newDiv = document.createElement('div');
newDiv.textContent = '새로운 내용';
document.body.appendChild(newDiv);

노드 삭제

const oldElement = document.getElementById('oldElement');
oldElement.remove();

속성 조작

const link = document.querySelector('a');
link.setAttribute('href', 'https://www.example.com');
const hrefValue = link.getAttribute('href');
link.removeAttribute('href');

05. 이벤트 핸들링🎉

이벤트 핸들링은 사용자의 상호작용에 반응하는 중요한 기능입니다. 자바스크립트로 다양한 이벤트를 처리할 수 있습니다.

이벤트 리스너 추가

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

이벤트 타입
- click: 클릭 이벤트
- load: 페이지가 로드될 때 발생
- DOMContentLoaded: 초기 HTML 문서가 완전히 로드되고 분석되었을 때 발생
이벤트 객체와 이벤트 버블링

document.body.addEventListener('click', function(event) {
  console.log('이벤트 타입: ' + event.type);
  console.log('이벤트 타겟: ' + event.target);
});

06. DOM 조작 실습 예제 📝

간단한 Todo 리스트 만들기

<ul id="todo-list">
  <li>예제 아이템 1</li>
</ul>
<input type="text" id="new-todo" placeholder="새로운 아이템">
<button id="add-todo">추가</button>

<script>
  const addButton = document.getElementById('add-todo');
  addButton.addEventListener('click', function() {
    const newTodo = document.getElementById('new-todo').value;
    const newLi = document.createElement('li');
    newLi.textContent = newTodo;
    document.getElementById('todo-list').appendChild(newLi);
  });
</script>

이미지 갤러리 구현

<div id="gallery"></div>
<button id="load-images">이미지 불러오기</button>

<script>
  document.getElementById('load-images').addEventListener('click', function() {
    const gallery = document.getElementById('gallery');
    for (let i = 1; i <= 5; i++) {
      const img = document.createElement('img');
      img.src = 'image' + i + '.jpg';
      gallery.appendChild(img);
    }
  });
</script>

07. 최적화 및 성능 팁🚀

DOM을 효율적으로 조작하면 웹 페이지의 성능을 크게 향상시킬 수 있습니다. 특히 대규모 웹 애플리케이션에서는 성능 최적화가 매우 중요합니다. 이번 섹션에서는 DocumentFragment와 Reflow, Repaint에 대해 자세히 알아보겠습니다.

DocumentFragment란?

DocumentFragment는 DOM에서 일종의 가상 노드 객체로, 부모가 없는 상태로 존재합니다. DocumentFragment를 사용하면 여러 요소를 DOM에 추가하기 전에 한 번에 작성할 수 있어 성능을 최적화할 수 있습니다.

DocumentFragment의 장점

DOM 업데이트 최소화: DocumentFragment에 요소를 추가하는 동안 DOM에 영향을 주지 않으므로, DOM 업데이트 횟수를 줄일 수 있습니다.
성능 향상: 한 번에 여러 요소를 DOM에 추가하는 것보다, DocumentFragment에 요소를 추가한 후 한 번에 DOM에 삽입하는 것이 더 효율적입니다.

DocumentFragment 사용 예시

const fragment = document.createDocumentFragment();

for (let i = 0; i < 1000; i++) {
  const newDiv = document.createElement('div');
  newDiv.textContent = '아이템 ' + i;
  fragment.appendChild(newDiv);
}

document.body.appendChild(fragment);

위 코드에서는 1000개의 div 요소를 먼저 DocumentFragment에 추가한 후, 한 번에 DOM에 추가합니다. 이렇게 하면 브라우저가 1000번의 DOM 업데이트를 수행하는 대신, 한 번만 업데이트하게 되어 성능이 향상됩니다.

Reflow와 Repaint란?

Reflow와 Repaint는 웹 브라우저가 화면에 콘텐츠를 렌더링 하는 과정에서 발생하는 중요한 작업입니다. 이 두 작업은 성능에 큰 영향을 미치므로, 이를 최소화하는 것이 중요합니다.

Reflow(재배치)

Reflow는 요소의 레이아웃이 변경될 때 발생하는 과정입니다. 예를 들어, 요소의 크기, 위치, 또는 다른 요소에 대한 상대적 위치가 변경될 때 Reflow가 발생합니다. Reflow는 매우 비용이 많이 드는 작업으로, 페이지의 모든 요소가 다시 계산되어야 할 수 있습니다.

Repaint(재페인트)

Repaint는 요소의 스타일이 변경되어 화면에 다시 그려져야 할 때 발생합니다. 예를 들어, 요소의 색상, 배경, 또는 테두리가 변경될 때 Repaint가 발생합니다. Repaint는 Reflow보다 비용이 덜 들지만, 여전히 성능에 영향을 미칠 수 있습니다.

Reflow와 Repaint 최소화 방법:

스타일 변경 최소화: 한 번에 여러 스타일을 변경하기보다, 한 번에 스타일을 변경하는 것이 좋습니다.

// 나쁜 예
element.style.width = '100px';
element.style.height = '100px';
element.style.backgroundColor = 'red';

// 좋은 예
element.style.cssText = 'width: 100px; height: 100px; background-color: red;';

클래스를 사용하여 스타일 적용: 개별 스타일을 설정하는 대신 클래스를 추가하여 스타일을 변경하는 것이 더 효율적입니다.

// 나쁜 예
element.style.display = 'none';
element.style.display = 'block';

// 좋은 예
element.classList.add('hidden');
element.classList.remove('hidden');

오프라인 DOM 조작: DocumentFragment를 사용하거나, 요소를 DOM에서 제거한 후 변경을 적용하고 다시 추가하는 것이 좋습니다.

const fragment = document.createDocumentFragment();

for (let i = 0; i < 1000; i++) {
  const newDiv = document.createElement('div');
  newDiv.textContent = '아이템 ' + i;
  fragment.appendChild(newDiv);
}

document.body.appendChild(fragment);

리플로우 트리거 최소화: 가능한 한 레이아웃 변경을 최소화하고, 레이아웃 정보를 읽기 전에 쓰기 작업을 완료하는 것이 좋습니다.

// 나쁜 예
element.style.width = '100px';
var width = element.offsetWidth;
element.style.height = '100px';

// 좋은 예
element.style.width = '100px';
element.style.height = '100px';
var width = element.offsetWidth;

이러한 최적화 기법을 사용하면, DOM 조작으로 인한 성능 저하를 줄이고, 보다 빠르고 반응성이 좋은 웹 페이지를 만들 수 있습니다.