이벤트 처리와 DOM 조작
이벤트 처리와 DOM 조작
들어가기
자바스크립트를 통해 우리는 동적인 웹 페이지를 만들 수 있습니다. 사용자와 상호작용할 수 있는 페이지는 사용자 경험을 풍부하게 만들어 줍니다. 이번 장에서는 자바스크립트의 이벤트 처리와 DOM 조작에 대해 알아보겠습니다. "이벤트"란 사용자가 페이지와 상호작용하며 발생시키는 특정 사건을 말하며, "DOM 조작"은 이러한 이벤트에 반응하여 웹 페이지의 내용을 변경하거나 요소를 조작하는 작업을 말합니다.
이벤트 처리
이벤트란?
이벤트는 사용자가 웹 페이지에서 수행하는 동작을 나타냅니다. 예를 들어, 버튼을 클릭하거나 키보드를 입력하면 이벤트가 발생합니다. 자바스크립트에서는 이러한 이벤트를 감지하고, 원하는 동작을 구현하는 코드를 작성할 수 있습니다.
이벤트 핸들러
이벤트를 처리하기 위해 이벤트 핸들러를 사용합니다. 이벤트 핸들러는 특정 이벤트에 반응하여 실행될 코드를 담고 있는 함수입니다.
// 예시: 버튼 클릭 이벤트 처리하기
const button = document.querySelector("#myButton");
button.addEventListener("click", function() {
alert("버튼이 클릭되었습니다!");
});위 예시에서는 버튼이 클릭되었을 때 실행되는 사용자 정의 동작을 정의했습니다.
DOM 조작
DOM이란?
DOM(Document Object Model)은 프로그래밍 관점에서 웹 페이지의 구조를 나타내는 객체 모델입니다. 자바스크립트를 사용하여 DOM을 조작하면 페이지의 요소를 추가, 삭제, 변경할 수 있습니다.
주요 메서드
document.querySelector()및document.querySelectorAll()를 사용하여 HTML 요소를 선택합니다.element.innerHTML또는element.textContent를 수정하여 요소 내용을 변경할 수 있습니다.element.style속성을 수정하면 스타일 변경이 가능합니다.
// 예시: 텍스트 변경하기
const heading = document.querySelector("h1");
heading.textContent = "새로운 텍스트";이 코드는 H1 요소의 텍스트를 '새로운 텍스트'로 변경합니다.
정리
이벤트 처리와 DOM 조작은 자바스크립트를 통해 동적인 웹 페이지를 만드는데 핵심적인 역할을 합니다. 사용자 이벤트에 반응하여 실시간으로 웹 페이지를 업데이트하면 사용자 경험이 한층 더 개선됩니다. 이를 통해 여러분이 발전된 웹 개발의 길로 나아갈 수 있기를 바랍니다.
