자바스크립트 DOM 조작: 요소 선택과 수정 🚀

안녕, 친구들! 오늘은 우리가 웹 개발의 세계에서 자주 만나게 되는 아주 중요한 주제에 대해 이야기해볼 거야. 바로 "자바스크립트 DOM 조작"이라는 녀석이지. 😎 특히 요소를 선택하고 수정하는 방법에 대해 깊이 파고들어볼 거야. 이 내용은 프론트엔드 개발자로서 꼭 알아야 할 핵심 스킬이니까 집중해서 들어봐!

우리가 이 여정을 함께 떠나기 전에, 잠깐! 혹시 너희 중에 재능넷이라는 사이트 들어봤어? 여기서 우리가 배우는 자바스크립트 스킬을 활용해서 멋진 프로젝트를 만들 수 있을 거야. 나중에 한 번 둘러보는 것도 좋을 것 같아. 자, 이제 본격적으로 시작해볼까?

🔑 핵심 포인트: DOM(Document Object Model)은 HTML 문서의 구조를 표현하는 방식이야. 자바스크립트를 사용하면 이 DOM을 조작해서 웹 페이지의 내용, 구조, 스타일을 동적으로 변경할 수 있어. 정말 강력하지?

1. DOM이 뭐길래? 🤔

DOM, 이 세 글자가 뭘 의미하는지 알아? Document Object Model의 약자야. 뭔가 거창해 보이지? 하지만 걱정마, 생각보다 어렵지 않아.

DOM은 웹 페이지를 프로그래밍 언어(여기서는 자바스크립트)가 이해할 수 있는 구조로 표현한 거야. 쉽게 말해, HTML 문서를 객체의 트리 구조로 변환한 것이지. 이렇게 하면 자바스크립트가 웹 페이지의 각 요소에 쉽게 접근하고 조작할 수 있게 돼.

위의 그림을 보면, DOM이 어떻게 생겼는지 대충 감이 올 거야. 맨 위에 Document가 있고, 그 아래로 HTML, Head, Body 등의 요소들이 트리 형태로 연결되어 있지? 이런 구조 덕분에 우리는 자바스크립트로 웹 페이지의 특정 부분을 쉽게 찾아갈 수 있어.

💡 재미있는 사실: DOM은 마치 가족 족보 같아. Document가 할아버지라면, HTML은 아버지, 그리고 Body와 Head는 자식들... 이런 식으로 생각하면 이해하기 쉽지 않아?

2. 요소 선택하기: DOM의 보물찾기 🔍

자, 이제 DOM의 구조를 알았으니 실제로 어떻게 사용하는지 알아볼까? 가장 먼저 해야 할 일은 조작하고 싶은 요소를 선택하는 거야. 마치 보물찾기 게임처럼 말이야!

2.1 getElementById(): ID로 요소 찾기

가장 간단하고 많이 사용되는 방법이야. 특정 ID를 가진 요소를 찾을 때 사용해.


const myElement = document.getElementById('myUniqueId');

이렇게 하면 'myUniqueId'라는 ID를 가진 요소를 찾아서 myElement 변수에 저장할 수 있어. 아주 간단하지?

2.2 getElementsByClassName(): 클래스로 요소 찾기

특정 클래스를 가진 모든 요소를 찾고 싶을 때 사용해. 주의할 점은 이 메서드는 여러 개의 요소를 반환할 수 있다는 거야.


const myElements = document.getElementsByClassName('myClass');

이렇게 하면 'myClass'라는 클래스를 가진 모든 요소가 myElements에 배열 형태로 저장돼.

2.3 querySelector(): CSS 선택자로 요소 찾기

이 방법은 정말 강력해. CSS 선택자를 사용해서 요소를 찾을 수 있거든.


const myElement = document.querySelector('#myId');
const firstParagraph = document.querySelector('p');
const specialDiv = document.querySelector('.special');

이렇게 ID, 태그 이름, 클래스 등 다양한 방식으로 요소를 선택할 수 있어. querySelector는 조건에 맞는 첫 번째 요소만 반환한다는 점을 기억해!

2.4 querySelectorAll(): 여러 요소 한 번에 찾기

querySelector의 친구인 querySelectorAll은 조건에 맞는 모든 요소를 찾아줘.


const allParagraphs = document.querySelectorAll('p');
const specialElements = document.querySelectorAll('.special');

이렇게 하면 모든 p 태그나 'special' 클래스를 가진 모든 요소를 한 번에 선택할 수 있어.

이 그림을 보면 각 선택 방법의 특징을 한눈에 볼 수 있지? 상황에 따라 적절한 방법을 선택하는 게 중요해.

🌟 프로 팁: querySelector와 querySelectorAll은 강력하지만, 특정 ID를 찾을 때는 getElementById가 더 빠르다는 걸 기억해! 성능이 중요한 상황에서는 이 점을 고려해봐.

3. 요소 수정하기: DOM의 마법사가 되자! 🧙‍♂️

이제 요소를 선택하는 방법을 알았으니, 그 요소를 어떻게 수정할 수 있는지 알아볼 차례야. 이 부분이 정말 재미있어. 마치 마법사가 된 것처럼 웹 페이지를 변화시킬 수 있거든!

3.1 내용 변경하기

선택한 요소의 내용을 변경하는 건 정말 쉬워. innerHTML과 textContent라는 두 가지 주요 속성을 사용할 수 있어.


// innerHTML 사용하기
document.getElementById('myDiv').innerHTML = '<strong>새로운 내용!</strong>';

// textContent 사용하기
document.querySelector('.myParagraph').textContent = '이것은 새로운 텍스트입니다.';

innerHTML은 HTML 태그를 포함한 내용을 설정할 수 있고, textContent는 순수한 텍스트만 설정할 수 있어. 상황에 따라 적절한 것을 선택해서 사용하면 돼.

⚠️ 주의: innerHTML을 사용할 때는 조심해야 해. 사용자 입력을 직접 innerHTML에 넣으면 XSS(Cross-Site Scripting) 공격에 취약할 수 있어. 가능하면 textContent를 사용하거나, 사용자 입력을 적절히 sanitize(소독)해서 사용해야 해.

3.2 속성 변경하기

요소의 속성을 변경하는 것도 아주 간단해. setAttribute() 메서드를 사용하면 돼.


// 이미지 소스 변경하기
document.querySelector('img').setAttribute('src', 'new-image.jpg');

// 링크 주소 변경하기
document.getElementById('myLink').setAttribute('href', 'https://www.example.com');

또는 직접 속성에 접근해서 변경할 수도 있어:


document.querySelector('img').src = 'new-image.jpg';
document.getElementById('myLink').href = 'https://www.example.com';

3.3 스타일 변경하기

요소의 스타일을 동적으로 변경하는 것도 가능해. style 속성을 사용하면 돼.


const myElement = document.getElementById('myElement');
myElement.style.backgroundColor = 'blue';
myElement.style.color = 'white';
myElement.style.padding = '10px';

이렇게 하면 myElement의 배경색을 파란색으로, 글자색을 흰색으로 변경하고 패딩을 10px로 설정할 수 있어.

💡 알아두면 좋은 점: CSS 속성 이름에 하이픈(-)이 있는 경우, 자바스크립트에서는 카멜 케이스(camelCase)로 변환해서 사용해야 해. 예를 들어, 'background-color'는 'backgroundColor'가 돼.

3.4 클래스 조작하기

요소의 클래스를 추가하거나 제거하는 것도 DOM 조작의 중요한 부분이야. classList 속성을 사용하면 쉽게 할 수 있어.


const myElement = document.querySelector('.myClass');

// 클래스 추가하기
myElement.classList.add('newClass');

// 클래스 제거하기
myElement.classList.remove('oldClass');

// 클래스 토글하기 (있으면 제거, 없으면 추가)
myElement.classList.toggle('toggleClass');

// 클래스 존재 여부 확인하기
if (myElement.classList.contains('checkClass')) {
    console.log('checkClass가 존재합니다!');
}

이렇게 클래스를 조작하면 CSS와 연계해서 요소의 스타일을 동적으로 변경할 수 있어. 정말 유용하지?

이 그림을 보면 DOM 요소를 수정하는 주요 방법들을 한눈에 볼 수 있어. 각 방법은 서로 다른 상황에서 유용하게 사용될 수 있지.

4. 실전 예제: 간단한 To-Do 리스트 만들기 📝

자, 이제 우리가 배운 내용을 활용해서 간단한 To-Do 리스트를 만들어볼 거야. 이 예제를 통해 DOM 조작의 실제 사용법을 이해할 수 있을 거야.


<!-- HTML -->
<div id="todo-app">
  <input type="text" id="todo-input" placeholder="할 일을 입력하세요">
  <button id="add-button">추가</button>
  <ul id="todo-list"></ul>
</div>

<!-- JavaScript -->
<script>
// 필요한 요소들 선택하기
const input = document.getElementById('todo-input');
const addButton = document.getElementById('add-button');
const todoList = document.getElementById('todo-list');

// 할 일 추가 함수
function addTodo() {
  if (input.value !== '') {
    const li = document.createElement('li');
    li.textContent = input.value;
    
    // 삭제 버튼 만들기
    const deleteButton = document.createElement('button');
    deleteButton.textContent = '삭제';
    deleteButton.onclick = function() {
      todoList.removeChild(li);
    };
    
    li.appendChild(deleteButton);
    todoList.appendChild(li);
    input.value = '';
  }
}

// 버튼 클릭 이벤트 추가
addButton.addEventListener('click', addTodo);

// 엔터 키 입력 이벤트 추가
input.addEventListener('keypress', function(e) {
  if (e.key === 'Enter') {
    addTodo();
  }
});
</script>

이 코드를 실행하면, 간단하지만 실용적인 To-Do 리스트 앱이 만들어져. 입력창에 할 일을 적고 '추가' 버튼을 누르거나 엔터를 치면 리스트에 항목이 추가돼. 각 항목에는 '삭제' 버튼이 있어서 완료한 일을 지울 수도 있어.

이 예제에서 우리가 배운 여러 DOM 조작 기술들이 사용됐어: