자바스크립트 DOM, 웹 페이지 동적 조작

자바스크립트 DOM, 웹 페이지 동적 조작

자바스크립트의 DOM(Document Object Model) 조작은 웹 페이지를 동적으로 업데이트하고 사용자와 상호작용을 가능하게 합니다. 이 가이드에서는 DOM의 기본 개념부터 실제 활용 예제까지 다루어, 여러분이 웹 개발에서 DOM을 효과적으로 사용하는 방법을 설명하겠습니다.

 

 

목차

1. DOM이란?
2. DOM 요소 선택하기
3. DOM 요소 조작하기
4. 이벤트 처리
5. DOM 트래버설
6. 실전 예제
7. 결론

 

1. DOM이란?

DOM은 Document Object Model의 약자로, HTML 문서의 구조화된 표현입니다. DOM을 통해 자바스크립트로 HTML 요소를 조작하고 스타일을 변경하며, 이벤트를 처리할 수 있습니다.

 

 

2. DOM 요소 선택하기

DOM 요소를 선택하는 방법에는 여러 가지가 있습니다. 가장 많이 사용되는 방법은 getElementById, getElementsByClassName, getElementsByTagName, 그리고 querySelector, querySelectorAll입니다.

document.getElementById('myId');

document.querySelector('.myClass');

 

 

3. DOM 요소 조작하기

선택한 요소의 내용을 변경하거나 스타일을 조정할 수 있습니다. 예를 들어, 텍스트를 변경하려면 textContent 속성을 사용합니다.

document.getElementById('myId').textContent = '새 텍스트';

스타일을 변경하려면 style 속성을 사용합니다:

document.getElementById('myId').style.color = 'blue';

 

 

4. 이벤트 처리

DOM 요소에 이벤트 리스너를 추가하여 사용자와의 상호작용을 처리할 수 있습니다. 예를 들어, 버튼을 클릭할 때 이벤트를 처리하려면 addEventListener 메서드를 사용합니다.

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

 

 

 

 

5. DOM 트래버설

DOM 트래버설을 통해 요소 간의 관계를 탐색할 수 있습니다. 부모 요소, 자식 요소, 형제 요소 등을 탐색하는 메서드로는 parentNode, childNodes, nextSibling 등이 있습니다.

let parent = document.getElementById('myId').parentNode;

let children = document.getElementById('myId').childNodes;

6. 실전 예제

이제 실전 예제를 통해 앞서 배운 내용을 종합적으로 활용해보겠습니다. 다음은 리스트 항목을 동적으로 추가하는 예제입니다:

let ul = document.querySelector('ul');
let li = document.createElement('li');
li.textContent = '새 항목';
ul.appendChild(li);

 

 

7. 결론

자바스크립트를 사용한 DOM 조작은 웹 페이지를 동적으로 만드는 데 필수적인 기술입니다. 이번 가이드를 통해 기본적인 DOM 조작 방법부터 고급 기능까지 익혀보았습니다. 실전 예제를 통해 더욱 능숙하게 활용할 수 있을 것입니다.