자바스크립트 강의 #6 DOM 조작방법

요소 선택 메서드:
getElementById() – ID로 선택 (하나)
getElementsByClassName() – 클래스로 선택 (여러 개)
getElementsByTagName() – 태그로 선택 (여러 개)
querySelector() – CSS 선택자로 선택 (하나)
querySelectorAll() – CSS 선택자로 선택 (여러 개)

메서드	선택 방식	반환값	예시
`getElementById`	ID	단일 요소	‘header’
`querySelector`	CSS 선택자	첫 번째 요소	‘.class’, ‘#id’
`querySelectorAll`	CSS 선택자	NodeList	‘.item’, ‘div’

> 다양한 선택 방법

결과가 여기에 나타납니다…

[ 내용과 스타일 변경하기 ]

요소를 선택했으면 이제 내용이나 스타일을 변경할 수 있어. 텍스트, HTML, CSS를 모두 자바스크립트로 제어할 수 있지!

내용 변경 속성:
textContent – 텍스트만 변경
innerHTML – HTML 포함해서 변경
value – 입력 필드의 값

스타일 변경:
style.property – 인라인 스타일
classList – 클래스 추가/제거/토글

스타일을 변경해보세요!

> 내용과 스타일 조작

결과가 여기에 나타납니다…

[ 요소 생성과 추가 – 동적으로 만들기 ]

기존 요소를 수정하는 것뿐만 아니라, 새로운 요소를 만들어서 추가할 수도 있어! 동적인 웹페이지의 핵심이야.

요소 조작 메서드:
createElement() – 새 요소 생성
appendChild() – 자식으로 추가
insertBefore() – 특정 위치에 삽입
removeChild() – 자식 제거
replaceChild() – 자식 교체
cloneNode() – 요소 복제

아이템 목록:

기본 아이템 1

> 요소 생성과 조작

결과가 여기에 나타납니다…

[ 이벤트 처리 – 사용자와 상호작용 ]

이벤트는 사용자가 웹페이지와 상호작용할 때 발생해. 클릭, 입력, 마우스 움직임 등을 감지하고 처리할 수 있어!

자주 사용하는 이벤트:
click – 클릭했을 때
mouseover/mouseout – 마우스 올리기/내리기
keydown/keyup – 키보드 누르기/떼기
change – 값이 변경될 때
submit – 폼 제출할 때
load – 페이지 로드 완료

다양한 이벤트를 체험해보세요!

이벤트 결과가 여기에 표시됩니다

> 이벤트 처리하기

결과가 여기에 나타납니다…

[ 실전 프로젝트 – 투두 리스트 만들기 ]

지금까지 배운 DOM 조작을 활용해서 실제로 동작하는 투두 리스트를 만들어보자!

퀴즈: 클래스가 ‘active’인 모든 요소를 선택하는 올바른 방법은?

document.getElementById(‘active’)

document.querySelector(‘active’)

document.querySelectorAll(‘.active’)

document.getElementByClass(‘active’)

나의 할 일 목록

> 투두 리스트 앱

결과가 여기에 나타납니다…

[ 다음 단계는? ]

축하해! 이제 웹페이지를 동적으로 만들 수 있는 DOM 조작을 마스터했어. 정적인 HTML이 자바스크립트를 만나 살아 움직이게 됐지!

DOM 조작 마스터 체크리스트:
✓ 다양한 방법으로 요소 선택하기
✓ 내용과 스타일 변경하기
✓ 새로운 요소 생성하고 추가하기
✓ 이벤트 처리로 상호작용 구현
✓ 실제 동작하는 웹 앱 만들기

다음 강의 예고:
비동기 프로그래밍과 API 통신! 서버와 데이터를 주고받는 진짜 웹 개발의 시작이야

< 이전강의 #5 배열과 객체란?

다음강의 #7 이벤트 처리 >

자바스크립트 전체 강의목록 >