웹 개발에서 자바스크립트를 활용해 DOM을 조작하는 것은 동적이고 상호작용적인 웹페이지를 만드는 데 필수적입니다. DOM은 웹페이지의 구조를 트리 형태로 표현한 모델로, HTML 요소를 자바스크립트로 제어할 수 있게 해줍니다.
자바스크립트를 통해 DOM 요소를 선택하고 조작하여 동적 콘텐츠를 구현하는 기초 방법에 대해 설명하겠습니다.
1. DOM이란?
DOM은 웹페이지의 HTML 문서를 트리 구조로 표현한 모델로, 각 요소가 자바스크립트를 통해 제어될 수 있도록 합니다. 웹페이지를 구성하는 <div>, <p>, <button> 같은 모든 HTML 요소는 자바스크립트에서 접근하고 조작할 수 있습니다. DOM 조작을 통해 클릭 이벤트, 값 변경 등 사용자 상호작용에 반응하는 웹페이지를 구현할 수 있습니다.
2. DOM 요소 선택하기
자바스크립트에서 DOM 요소를 선택하는 방법에는 여러 가지가 있으며, 특정 요소를 정확하게 지정할 수 있어야 효율적인 DOM 조작이 가능합니다.
getElementById():id속성으로 요소를 선택합니다.getElementsByClassName(): 클래스 이름으로 요소를 선택하며, HTMLCollection 형태로 반환합니다.getElementsByTagName(): 태그 이름으로 요소를 선택합니다.querySelector()및querySelectorAll(): CSS 선택자를 사용해 특정 요소나 모든 일치하는 요소들을 선택합니다.
const header = document.getElementById('header');
const items = document.getElementsByClassName('item');
const paragraphs = document.getElementsByTagName('p');
const mainButton = document.querySelector('.button'); const allButtons = document.querySelectorAll('.button');
3. DOM 조작하기
DOM에서 선택한 요소의 텍스트, 속성, 스타일 등을 변경하여 페이지에 실시간으로 반영할 수 있습니다.
- 텍스트 콘텐츠 변경 textContent 또는 innerHTML 속성을 사용해 요소의 텍스트나 HTML 콘텐츠를 변경할 수 있습니다.
- HTML 속성 변경 setAttribute 메서드를 사용해 요소의 속성을 동적으로 변경할 수 있습니다.
- CSS 스타일 변경 style 속성을 사용하여 특정 요소의 CSS 스타일을 직접 변경할 수 있습니다.
- 클래스 추가 및 제거 클래스 이름을 추가하거나 제거하여 스타일을 동적으로 변경할 수 있습니다.
const title = document.getElementById('title'); title.textContent = '새로운 제목입니다.';
const link = document.querySelector('a'); link.setAttribute('href', '<https://example.com>');
const box = document.querySelector('.box'); box.style.backgroundColor = 'blue';
const item = document.querySelector('.item'); item.classList.add('highlight'); item.classList.remove('highlight');
4. 이벤트와 DOM 조작
사용자의 상호작용에 반응하는 동적 웹페이지를 만들기 위해서는 이벤트를 사용합니다. 버튼 클릭, 마우스 이동, 입력 등의 이벤트에 따라 DOM 요소를 변경할 수 있습니다.
- 이벤트 리스너 추가 addEventListener 메서드를 사용해 특정 이벤트 발생 시 실행될 함수를 지정할 수 있습니다.
- 폼 입력 이벤트 처리 input 이벤트나 change 이벤트를 통해 사용자가 폼에 입력한 내용을 실시간으로 반영할 수 있습니다.
- 동적 콘텐츠 생성 자바스크립트를 사용해 새로운 요소를 동적으로 생성하고 기존 DOM에 추가할 수 있습니다.
const button = document.querySelector('button'); button.addEventListener('click', function() { alert('버튼이 클릭되었습니다!'); });
const inputField = document.querySelector('input'); inputField.addEventListener('input', function(event) { console.log(event.target.value); });
const newDiv = document.createElement('div'); newDiv.textContent = '새로운 요소입니다'; document.body.appendChild(newDiv);
5. 실전 예제: 동적 리스트 추가 기능
자바스크립트를 통해 입력받은 데이터를 동적으로 리스트에 추가하는 기능을 구현해보겠습니다.
- HTML 구조
- 자바스크립트 코드 이 코드에서는 사용자가 입력한 텍스트를 li 요소로 만들어 ul 리스트에 추가합니다. trim()을 사용해 공백 입력을 방지하고, 추가 후 입력 필드를 비웁니다.
<input type="text" id="itemInput" placeholder="추가할 항목을 입력하세요">
<button id="addButton">추가</button>
<ul id="itemList"></ul>
const addButton = document.getElementById('addButton');
const itemInput = document.getElementById('itemInput');
const itemList = document.getElementById('itemList');
addButton.addEventListener('click', function() {
const itemText = itemInput.value;
if (itemText.trim()) {
const newItem = document.createElement('li');
newItem.textContent = itemText;
itemList.appendChild(newItem);
itemInput.value = '';
}
});
6. DOM 조작 시 주의사항
- 성능 최적화: DOM 조작이 많아지면 페이지 성능이 저하될 수 있습니다. 특히 반복되는 작업은 Document Fragment를 사용해 한 번에 삽입하는 것이 좋습니다.
- 사용자 경험: DOM 조작이 잦을수록 사용자에게 부드럽게 반응하는 UI를 제공하기 위해 애니메이션과 트랜지션을 함께 고려하는 것이 좋습니다.
- 접근성: 스크린 리더 등 접근성을 고려해, 조작하는 요소들이 적절히 업데이트되도록 주의하세요.
DOM 조작은 자바스크립트로 동적 웹페이지를 만드는 기본적인 방법입니다. 다양한 DOM 선택 및 조작 메서드를 통해 HTML 구조를 동적으로 업데이트하고, 이벤트와 조합하여 사용자와 상호작용할 수 있는 페이지를 구현할 수 있습니다. 실습을 통해 DOM 조작 기초를 익히고, 복잡한 웹페이지 구현에도 도전해 보세요.
