DOM 조작과 이벤트 핸들링 정복: JavaScript로 웹 페이지 제어의 모든 것

DOM 조작

웹 페이지에 존재하는 모든 요소와 속성, 텍스트 등을 조작할 수 있는 방법이다. JavaScript를 사용하여 DOM을 유연하게 다룰 수 있으며, 이를 통해 동적인 웹 페이지를 구현한다.

선택자 사용법

DOM 요소를 선택하는 것은 DOM 조작의 첫걸음이다. 

1. getElementById

ID 속성을 사용하여 요소를 선택하는 방법이다.

const title = document.getElementById('title');
console.log(title);  // id가 'title'인 DOM 요소 출력

2. getElementsByClassName

클래스 속성을 사용하여 요소들을 선택하는 방법이다.

const items = document.getElementsByClassName('item');
console.log(items);  // 클래스 이름이 'item'인 모든 DOM 요소를 NodeList로 출력

3. getElementsByTagName

태그 이름을 사용하여 요소들을 선택하는 방법이다.

const paragraphs = document.getElementsByTagName('p');
console.log(paragraphs);  // 'p' 태그인 모든 DOM 요소를 NodeList로 출력

4. querySelector

CSS 선택자를 사용하여 요소를 선택하는 방법이다.

const header = document.querySelector('.header');
console.log(header);  // 클래스 이름이 'header'인 첫 번째 DOM 요소 출력

5. querySelectorAll

CSS 선택자를 사용하여 모든 매칭 요소들을 선택하는 방법이다.

const buttons = document.querySelectorAll('button');
console.log(buttons);  // 'button' 태그인 모든 DOM 요소를 NodeList로 출력

6. parentNode, parentElement

부모 요소를 선택하는 방법이다.

const parent = document.querySelector('#child').parentNode;
console.log(parent);  // id가 'child'인 요소의 부모 DOM 요소 출력

7. children

자식 요소들을 선택하는 방법이다.

const childElements = document.querySelector('.container').children;
console.log(childElements);  // 클래스 이름이 'container'인 요소의 모든 자식 DOM 요소를 HTMLCollection으로 출력

DOM 요소 조작

선택된 DOM 요소의 텍스트를 변경하거나, 속성을 수정하고, 새로운 요소를 추가하는 등의 작업이 포함된다.

1. 요소의 내용 변경

const paragraph = document.querySelector('p');
paragraph.textContent = '새로운 텍스트로 변경되었습니다!';

2. HTML 요소 추가

const div = document.querySelector('div');
div.innerHTML += '<p>새로운 문장을 추가합니다.</p>';

3. 요소의 속성 변경

const image = document.querySelector('img');
image.src = 'newImage.jpg';
image.alt = '새로운 이미지 설명';

4. 클래스 추가, 제거, 토글

const element = document.querySelector('.myElement');

// 클래스 추가
element.classList.add('newClass');

// 클래스 제거
element.classList.remove('oldClass');

// 클래스 토글
element.classList.toggle('active');

5. 요소 생성과 추가

const newParagraph = document.createElement('p');
newParagraph.textContent = '이것은 새로운 문단입니다.';
document.body.appendChild(newParagraph);

6. 요소 삭제

const oldParagraph = document.querySelector('p.old');
oldParagraph.remove();

7. 이벤트 리스너 추가

const button = document.querySelector('button');

button.addEventListener('click', () => {
    alert('버튼이 클릭되었습니다!');
});

8. 스타일 변경

const title = document.querySelector('h1');
title.style.color = 'red';
title.style.fontSize = '32px';

9. 데이터 속성 사용

const customDataElement = document.querySelector('[data-custom]');
const customDataValue = customDataElement.dataset.custom;
console.log(customDataValue); // 해당 data 속성의 값을 출력

10. 요소의 위치와 크기 정보 얻기

const box = document.querySelector('.box');
const rect = box.getBoundingClientRect();
console.log(rect.top, rect.right, rect.bottom, rect.left);

이벤트 핸들링

웹 페이지에서 발생하는 다양한 이벤트에 반응하여 특정 동작을 수행한다. 클릭, 키보드 입력, 마우스 움직임 등에 반응하는 코드를 작성한다.

이벤트 리스너

이벤트 리스너는 특정 요소에서 발생하는 이벤트를 감지하고, 해당 이벤트가 발생했을 때 실행할 콜백 함수를 지정한다.

// 1. 클릭 이벤트
const button = document.querySelector('button');
button.addEventListener('click', () => {
    console.log('버튼이 클릭되었습니다!');
});


// 2. 마우스 오버 이벤트
const image = document.querySelector('img');
image.addEventListener('mouseover', () => {
    console.log('이미지에 마우스가 올려졌습니다!');
});


// 3. 키보드 입력 이벤트
const input = document.querySelector('input');
input.addEventListener('keydown', (event) => {
    console.log(`키보드 ${event.key} 키가 눌렸습니다!`);
});


// 4. 스크롤 이벤트
window.addEventListener('scroll', () => {
    console.log('스크롤 중입니다!');
});


// 5. 폼 제출 이벤트
const form = document.querySelector('form');
form.addEventListener('submit', (event) => {
    event.preventDefault();
    console.log('폼이 제출되었습니다!');
});


// 6. 이벤트 객체 활용
button.addEventListener('click', (event) => {
    console.log(event.target); // 클릭된 요소 정보 출력
});


// 7. 이벤트 리스너 제거
const clickHandler = () => {
    console.log('버튼 클릭!');
    button.removeEventListener('click', clickHandler);
};

button.addEventListener('click', clickHandler);


// 8. 여러 이벤트 타입에 한 리스너 추가
const multipleEventsHandler = (event) => {
    console.log(`이벤트 타입: ${event.type}`);
};

element.addEventListener('mouseover', multipleEventsHandler);
element.addEventListener('mouseout', multipleEventsHandler);

이벤트 객체

이벤트 핸들러 함수는 이벤트 객체를 자동으로 받아온다. 이 객체를 통해 이벤트에 대한 다양한 정보를 얻을 수 있다.

// 1. 이벤트 타입 확인
const button = document.querySelector('button');
button.addEventListener('click', (event) => {
    console.log(event.type);  // "click" 출력
});


// 2. 이벤트 대상 요소 확인
button.addEventListener('click', (event) => {
    console.log(event.target);  // 클릭된 버튼 요소 출력
});


// 3. 마우스 좌표 확인
document.addEventListener('click', (event) => {
    console.log(`X 좌표: ${event.clientX}, Y 좌표: ${event.clientY}`);
});


// 4. 키보드 키 정보 확인
document.addEventListener('keydown', (event) => {
    console.log(`키: ${event.key}, 코드: ${event.code}`);
});


// 5. 이벤트 기본 동작 취소
document.addEventListener('keydown', (event) => {
    console.log(`키: ${event.key}, 코드: ${event.code}`);
});


// 6. 이벤트 버블링 확인
button.addEventListener('click', (event) => {
    console.log(event.bubbles);  // 버튼 클릭 이벤트의 버블링 여부 출력 (true 또는 false)
});

이벤트 위임

이벤트 위임은 특정 요소에 직접 이벤트 리스너를 붙이지 않고, 상위 요소에 이벤트 리스너를 붙여 여러 요소의 이벤트를 한 번에 처리하는 기법이다.

const list = document.querySelector('ul');
list.addEventListener('click', (event) => {
    if (event.target.tagName === 'LI') {
        event.target.style.color = 'red';
    }
});