[6장 2강] - DOM 객체 트리 탐색 및 문서 요소 동적 제어

학습 목표

</aside>

실습 목표

HTML 요소의 텍스트와 속성을 동적으로 변경할 수 있다.
새로운 요소를 생성하여 원하는 위치에 추가하거나 삭제할 수 있다.
폼 입력값을 가져와 화면에 출력하고 스타일 클래스를 조작할 수 있다. </aside>

진행 방식

사용 IDE
각 문제에 내용들을 확인하여 코드를 작성하여주세요.
현업에서 여러분의 코딩 실력을 키우기 위해 ChatGPT 사용을 금지합니다.
- 당장의 문제는 해결 할 수 있지만 실력 향상에는 독입니다.
- 추가로 튜터님들에게 직접적으로 문제 해결을 바라는 질문도 지양해주세요. </aside>

필수 1 : 웹 페이지 프로필 정보 동적 업데이트

<aside>

버튼을 클릭했을 때 화면에 표시된 사용자 이름과 프로필 이미지의 주소를 자바스크립트로 실시간 변경하는 과정을 연습합니다.

</aside>

문제 1-1 : 프로필 카드 내용 및 속성 변경하기

스크린샷 2026-09-30 17.33.20.png

필수 2 : 동물 이름 리스트 항목 추가 및 삭제

<aside>

최신 문서 제어 메서드를 사용하여 웹 화면에 새로운 동물 이름 요소를 맨 앞에 추가하고 화면에서 즉시 삭제하는 기능을 구현합니다.

</aside>

문제 2-1 : 최신 표준 메서드를 활용한 목록 제어

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        window.addEventListener("DOMContentLoaded", function() {
            const animal4 = document.createElement('li');
            const animal4Txt = document.createTextNode('불독');
            animal4.appendChild(animal4Txt);
            const animals = document.querySelector('.animal');
            const prepend = document.getElementById('prepend');
            prepend.addEventListener("click", function() {
                animals.prepend(animal4);
            });
            const remove = document.getElementById('remove');
            remove.addEventListener("click", function() {
                animals.remove(animal4);
            });
        });
        

    </script>
    <ul>
        <li class="animal">사자</li>
        <li class="animal">호랑이</li>
        <li class="animal">얼룩말</li>
    </ul>

    <button id="prepend">삽입</button>
    <button id="remove">삭제</button>
</body>
</html>

스크린샷 2026-09-30 17.25.06.png

심화 1 : 주문 정보 데이터 추출 및 스타일 토글

<aside>

입력 양식에 작성한 텍스트를 단축 표기법으로 가져와 출력하고 classList 속성을 통해 상자의 디자인을 실시간으로 제어하는 심화 과정을 진행합니다.

</aside>

필수 1 : 웹 페이지 프로필 정보 동적 업데이트

문제 1-1 : 프로필 카드 내용 및 속성 변경하기

필수 2 : 동물 이름 리스트 항목 추가 및 삭제

문제 2-1 : 최신 표준 메서드를 활용한 목록 제어

심화 1 : 주문 정보 데이터 추출 및 스타일 토글

문제 3-1 : 폼 데이터 접근 및 클래스 제어