[JS 4강] HTML을 내 마음대로! DOM 조작 기초

[JS 4강] HTML을 내 마음대로! DOM 조작 기초

"자바스크립트로 웹페이지의 글자, 색상, 구조를 실시간으로 바꿔봅시다."

안녕하세요! 지난 3강에서는 함수를 통해 코드를 효율적으로 묶는 법을 배웠습니다. 오늘은 자바스크립트의 진정한 힘, 바로 웹페이지의 구성 요소들을 마음대로 주무르는 DOM(Document Object Model) 조작에 대해 알아보겠습니다.

1. DOM이란 무엇인가요?

DOM은 브라우저가 HTML 문서를 자바스크립트가 이해할 수 있는 객체(Object) 형태로 만든 지도와 같습니다. 이 지도를 통해 우리는 특정 태그를 찾고, 내용을 바꾸고, 스타일을 수정할 수 있습니다.

✅ 선택: "id가 'title'인 태그를 가져와줘"

✅ 수정: "그 태그의 글자를 '반가워요'로 바꿔줘"

✅ 스타일: "그 태그의 배경색을 노란색으로 해줘"

2. 요소를 선택하고 바꾸는 핵심 명령어

가장 자주 쓰이는 두 가지 방식만 기억해도 충분합니다.

• 🔍 document.getElementById('아이디'): 특정 ID를 가진 요소를 하나 선택합니다.
• 🔍 document.querySelector('.클래스'): CSS 선택자 방식으로 요소를 선택합니다.

3. DOM 조작 실습 예제

HTML에 있는 요소를 자바스크립트로 직접 제어하는 과정을 살펴보세요.

<!-- HTML 구조 --> <h1 id="main-title">원래 제목입니다</h1> <button onclick="changeText()">제목 바꾸기</button> <script> function changeText() { // 1. 요소를 찾아서 변수에 담기 const title = document.getElementById('main-title'); // 2. 내용 바꾸기 (innerText) title.innerText = "자바스크립트로 바뀐 제목!"; // 3. 스타일 바꾸기 (style) title.style.color = "#f1c40f"; title.style.backgroundColor = "#222"; title.style.padding = "10px"; } </script>

4. 클래스 제어하기 (classList)

스타일을 하나씩 바꾸는 것보다, 미리 만들어둔 CSS 클래스를 꼈다 뺐다 하는 것이 더 효율적입니다.

요소.classList.add('active'); - 클래스 추가
요소.classList.remove('active'); - 클래스 제거
요소.classList.toggle('active'); - 클래스가 있으면 제거, 없으면 추가

화면을 움직이게 하는 첫 단추!

DOM 조작을 할 줄 안다는 것은 이제 진짜 '웹 앱'을 만들 준비가 되었다는 뜻입니다.

마지막 5강에서는 클릭과 같은 사용자의 동작에 반응하는 '이벤트 리스너'를 배워볼게요!