DOM 조작과 이벤트 예제

1. 요소 선택

ID로 선택된 요소

클래스로 선택 1

클래스로 선택 2

data 속성으로 선택

2. 요소 생성 및 추가

기존 항목 1
기존 항목 2

3. 스타일 및 클래스 조작

스타일 조작 대상

4. 속성 조작

현재 alt:

5. 이벤트 리스너

이 영역에서 다양한 이벤트를 테스트하세요.
클릭, 더블클릭, 마우스 이동, 키보드 입력 등

6. 이벤트 위임 (Event Delegation)

개별 요소에 이벤트를 등록하지 않고, 부모에서 처리합니다.

1

2

3

4

5

선택된 카드: 없음

7. 폼 이벤트

폼 데이터가 여기에 표시됩니다.

8. 키보드 이벤트

키 정보가 여기에 표시됩니다.

9. 드래그 앤 드롭

1

2

3

10. 스크롤 이벤트

스크롤하세요!

스크롤 위치: 0px

Lorem ipsum dolor sit amet...

더 많은 콘텐츠...

계속 스크롤...

거의 끝...

끝!