자바스크립트 DOM (요소선택, 이벤트처리, 동적변경)

 

 

 

자바스크립트(JavaScript)는 웹페이지를 동적으로 제어할 수 있는 클라이언트 사이드 스크립트 언어입니다. 그 중심에는 DOM(Document Object Model)이 있습니다. DOM은 HTML 문서를 객체 구조로 표현한 것으로, 자바스크립트를 이용해 요소를 선택하거나, 이벤트를 처리하고, 내용을 동적으로 변경하는 데 핵심적인 역할을 합니다. 이번 글에서는 자바스크립트 DOM의 기본 개념부터 요소 선택, 이벤트 처리, 동적 변경 까지 실전 중심으로 살펴봅니다.

1. DOM 요소 선택과 탐색 방법 – getElement부터 querySelector까지

const title = document.getElementById('main-title'); 
const items = document.getElementsByClassName('item'); 
const divs = document.getElementsByTagName('div'); 
const button = document.querySelector('.btn'); 
const allButtons = document.querySelectorAll('.btn'); 

const nav = document.querySelector('#nav-bar'); 
const links = document.querySelectorAll('a[href^="http"]');

• parentElement, children, nextElementSibling 등 탐색 가능
• closest()로 조건에 맞는 상위 요소 탐색

2. 자바스크립트 이벤트 처리 기초 – 사용자와의 상호작용 만들기

const btn = document.querySelector('#submitBtn'); 
btn.addEventListener('click', function() { 
alert('버튼이 클릭되었습니다!'); 
}); 
btn.addEventListener('mouseover', () => { 
console.log('마우스 오버 발생'); 
}); 
document.addEventListener('keydown', (event) => { 
console.log(`입력된 키: ${event.key}`); 
}); 

• click, mouseover, keydown 등 다양한 이벤트 지원
• removeEventListener로 이벤트 제거 가능

3. DOM을 통한 동적 콘텐츠 변경 – 페이지를 살아 움직이게

heading.textContent = '변경된 제목입니다'; 
container.innerHTML = '<p>새로운 단락이 추가되었습니다.</p>'; 
img.setAttribute('src', 'new-image.jpg'); 
img.alt = '새로운 이미지'; 
box.classList.add('active'); 

const newItem = document.createElement('li'); 
newItem.textContent = '새 항목'; 
list.appendChild(newItem); 
list.removeChild(newItem); 

결론: 자바스크립트와 DOM은 인터랙티브 웹의 핵심

자바스크립트의 DOM 조작 기능은 정적인 웹페이지를 사용자와 상호작용 하는 동적 웹 앱으로 탈바꿈시켜 줍니다.

지금부터 DOM의 세계에 익숙해지고, 직접 실습해보세요!