LEVEL 41 QUEST

DOM 조작하기

선택한 요소의 내용, 스타일, 속성을 변경하는 방법을 배웁니다.

내용 변경하기

textContent

요소의 텍스트만 변경 (HTML 태그 무시)

el.textContent = '새로운 텍스트';

innerHTML

요소의 HTML 전체를 변경 (태그 해석됨)

el.innerHTML = '<strong>굵은 글씨</strong>';

주의!

innerHTML은 사용자 입력을 넣으면 XSS 공격 위험이 있습니다.
사용자 입력은 textContent를 사용하세요!

스타일 변경하기

// 개별 스타일 변경
el.style.color = 'red';
el.style.backgroundColor = '#333';
el.style.fontSize = '20px';
el.style.display = 'none';  // 숨기기

// CSS 속성명: kebab-case → camelCase
// background-color → backgroundColor
// font-size → fontSize
    

classList로 클래스 조작

스타일을 직접 바꾸는 것보다 클래스를 추가/제거하는 게 더 좋습니다!

// 클래스 추가
el.classList.add('active');

// 클래스 제거
el.classList.remove('active');

// 클래스 토글 (있으면 제거, 없으면 추가)
el.classList.toggle('active');

// 클래스 포함 여부 확인
el.classList.contains('active');  // true/false
    

🔒

여기까지는 미리보기입니다

DOM 조작하기
무료 가입하면 이어서 볼 수 있고, 강의를 완료할 때마다 XP와 레벨이 쌓입니다.

Google로 3초 만에 시작 →🧵 Threads로 시작 무료 공개 강의 둘러보기 (Lv.1~3)