JavaScript를 사용하여 웹 페이지와 상호작용하려면 DOM(Document Object Model)을 조작하고 이벤트를 처리하는 방법을 이해해야 합니다. DOM 조작을 통해 웹 페이지의 구조, 스타일, 콘텐츠를 동적으로 변경할 수 있습니다. 이벤트 처리는 사용자 상호작용을 감지하고 이에 대한 적절한 반응을 제공하는 데 사용됩니다.
1. DOM 조작
DOM 조작은 JavaScript를 사용하여 HTML 문서의 구조, 스타일, 콘텐츠를 변경하는 것을 의미합니다.
1.1. DOM 요소 선택
DOM 요소를 선택하는 방법은 여러 가지가 있습니다. 가장 일반적인 방법은 getElementById, getElementsByClassName, getElementsByTagName, querySelector, querySelectorAll 메서드를 사용하는 것입니다.
// ID로 요소 선택
const elementById = document.getElementById('myId');
// 클래스 이름으로 요소 선택
const elementsByClassName = document.getElementsByClassName('myClass');
// 태그 이름으로 요소 선택
const elementsByTagName = document.getElementsByTagName('div');
// CSS 선택자로 요소 선택
const elementBySelector = document.querySelector('.myClass'); // 첫 번째 요소
const elementsBySelectorAll = document.querySelectorAll('.myClass'); // 모든 요소1.2. DOM 요소 조작
선택한 요소의 내용을 변경하거나 속성을 조작할 수 있습니다.
const element = document.getElementById('myId');
// 텍스트 내용 변경
element.textContent = 'Hello, world!';
// HTML 내용 변경
element.innerHTML = '<span>Hello, world!</span>';
// 속성 변경
element.setAttribute('data-custom', 'value');
const customValue = element.getAttribute('data-custom');
element.removeAttribute('data-custom');
// 스타일 변경
element.style.color = 'red';
element.style.fontSize = '20px';1.3. DOM 요소 생성 및 제거
새로운 DOM 요소를 생성하고 기존 요소를 제거할 수 있습니다.
// 새로운 요소 생성
const newElement = document.createElement('div');
newElement.textContent = 'I am a new element';
document.body.appendChild(newElement);
// 요소 제거
const elementToRemove = document.getElementById('myId');
elementToRemove.parentNode.removeChild(elementToRemove);1.4. DOM 트리 조작
DOM 트리 내에서 요소를 이동하거나 복사할 수 있습니다.
const parentElement = document.getElementById('parent');
const childElement = document.getElementById('child');
// 자식 요소 추가
const newChild = document.createElement('div');
newChild.textContent = 'New child';
parentElement.appendChild(newChild);
// 자식 요소 복사
const clonedChild = childElement.cloneNode(true);
parentElement.appendChild(clonedChild);
// 자식 요소 이동
parentElement.appendChild(childElement);2. 이벤트 처리
이벤트 처리는 사용자의 상호작용(예: 클릭, 키보드 입력, 마우스 움직임)을 감지하고 이에 대한 적절한 반응을 제공하는 것을 의미합니다.
2.1. 이벤트 리스너 등록
이벤트 리스너를 등록하는 방법은 여러 가지가 있습니다.
2.1.1. HTML 속성을 사용한 방법
HTML 요소에 직접 이벤트 핸들러를 추가할 수 있습니다.
<button onclick="alert('Button clicked!')">Click me</button>2.1.2. DOM 요소의 이벤트 핸들러 속성을 사용하는 방법
JavaScript 코드 내에서 DOM 요소의 이벤트 핸들러 속성을 설정할 수 있습니다.
<button id="myButton">Click me</button>
<script>
const button = document.getElementById('myButton');
button.onclick = function() {
alert('Button clicked!');
};
</script>2.1.3. addEventListener 메서드를 사용하는 방법
가장 권장되는 방법으로, addEventListener 메서드를 사용하여 이벤트 리스너를 추가하는 것입니다.
<button id="myButton">Click me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('Button clicked!');
});
</script>2.2. 이벤트 객체
이벤트가 발생할 때 이벤트 객체가 자동으로 콜백 함수에 전달됩니다. 이벤트 객체는 이벤트에 대한 다양한 정보를 포함합니다.
<button id="myButton">Click me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function(event) {
console.log('Button clicked at position: ', event.clientX, event.clientY);
});
</script>2.3. 이벤트 전파
이벤트는 캡처링 단계와 버블링 단계를 거쳐 전파됩니다.
2.3.1. 이벤트 캡처링
이벤트가 최상위 요소에서 시작하여 이벤트가 발생한 요소까지 내려가는 과정입니다.
<div id="parent">
<button id="child">Click me</button>
</div>
<script>
const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.addEventListener('click', function() {
console.log('Parent clicked');
}, true); // 캡처링 단계에서 이벤트 처리
child.addEventListener('click', function() {
console.log('Child clicked');
});
</script>2.3.2. 이벤트 버블링
이벤트가 발생한 요소에서 시작하여 최상위 요소까지 올라가는 과정입니다.
<div id="parent">
<button id="child">Click me</button>
</div>
<script>
const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.addEventListener('click', function() {
console.log('Parent clicked');
});
child.addEventListener('click', function() {
console.log('Child clicked');
});
</script>2.3.3. 이벤트 전파 중단
event.stopPropagation() 메서드를 사용하여 이벤트 전파를 중단할 수 있습니다.
<div id="parent">
<button id="child">Click me</button>
</div>
<script>
const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.addEventListener('click', function() {
console.log('Parent clicked');
});
child.addEventListener('click', function(event) {
console.log('Child clicked');
event.stopPropagation(); // 이벤트 전파 중단
});
</script>2.4. 이벤트 리스너 제거
removeEventListener 메서드를 사용하여 이벤트 리스너를 제거할 수 있습니다.
<button id="myButton">Click me</button>
<button id="removeListener">Remove Listener</button>
<script>
const button = document.getElementById('myButton');
const removeButton = document.getElementById('removeListener');
function handleClick() {
alert('Button clicked!');
}
button.addEventListener('click', handleClick);
removeButton.addEventListener('click', function() {
button.removeEventListener('click', handleClick);
});
</script>결론
JavaScript를 사용한 DOM 조작과 이벤트 처리는 웹 페이지와 사용자 간의 상호작용을 가능하게 합니다. DOM 조작을 통해 웹 페이지의 구조와 스타일을 동적으로 변경하고, 이벤트 처리를 통해 사용자 입력에 반응하는 기능을 구현할 수 있습니다. 다양한 방법을 연습하고 적용하여 더 나은 사용자 경험을 제공할 수 있습니다.