이벤트와 DOM 조작

이벤트와 DOM 조작

1. 이벤트란?

이벤트(Event)는 사용자의 행동(클릭, 키 입력, 마우스 이동 등)에 반응하는 기능입니다.

2. DOM(Document Object Model)이란?

DOM은 HTML 문서를 트리 구조로 표현한 모델로, JavaScript를 통해 HTML 요소를 조작할 수 있습니다.

3. 이벤트 리스너(Event Listener)

이벤트를 감지하고 특정 동작을 실행하는 코드로, addEventListener()를 이용해 구현할 수 있습니다.

4. 예제: 이벤트를 활용한 DOM 조작

document.getElementById("changeColor").addEventListener("click", function() {
    let box = document.getElementById("box");
    let colors = ["lightblue", "lightcoral", "lightgreen", "lightgoldenrodyellow"];
    let randomColor = colors[Math.floor(Math.random() * colors.length)];
    box.style.backgroundColor = randomColor;
});

document.getElementById("changeText").addEventListener("click", function() {
    let box = document.getElementById("box");
    let messages = ["안녕하세요!", "DOM 조작 중!", "이벤트 발생!", "JavaScript 재미있어요!"];
    let randomMessage = messages[Math.floor(Math.random() * messages.length)];
    box.textContent = randomMessage;
});

아래 버튼을 클릭하면 박스의 색상과 내용이 변경됩니다.

클릭하세요!

다음 글 바로 가기 : 자주 사용하는 내장 객체 (Array, Object, String 등)