[JavaScript] 실습 프로젝트 모음(1): 기초 DOM 실습

하영(Emma)·2025년 4월 23일

JavaScript

목록 보기

6/8

11. 태그 생성 실습

버튼 클릭 시 div 영역에 h1, a, ul 태그를 누적 생성한다.
각 버튼은 각기 다른 태그를 생성한다.
코드 구조를 다음 3영역으로 정리한다.

1) 요소를 변수에 저장하는 영역
2) 함수를 제작하는 영역
3) 함수와 태그를 연결하는 영역

React, Vue, Angular 등 프레임워크는 값이 바뀌면 자동 렌더링되지만,
순수 JavaScript에서는 innerHTML, innerText 등을 직접 수정해 반영해야 한다.

코드 예시

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>태그 생성 실습</title>
</head>
<body>
  <h1 id="text">클릭해서 태그를 누적 생성</h1>
  <button id="btn_h1">h1태그 생성</button>
  <button id="btn_a">a태그 생성</button>
  <button id="btn_ul">ul태그 생성</button>
  <div id="content"></div>

  <script>
    let div = document.getElementById("content");
    let btn_h1 = document.getElementById("btn_h1");
    let btn_a = document.getElementById("btn_a");
    let btn_ul = document.getElementById("btn_ul");

    const h1 = () => {
      div.innerHTML += "<h1>h1태그 생성</h1>";
    }

    const a = () => {
      div.innerHTML += "<a href='#'>a태그 생성</a>";
    }

    const ul = () => {
      div.innerHTML += `
        <ul>
          <li>HTML</li>
          <li>CSS</li>
        </ul>`;
    }

    btn_h1.addEventListener("click", h1);
    btn_a.addEventListener("click", a);
    btn_ul.addEventListener("click", ul);
  </script>
</body>
</html>

Tip!

innerHTML +=로 기존 내용 유지한 채 누적 가능
백틱(``)을 사용하면 가독성 좋은 HTML 작성 가능
요소 생성 후 바로 삽입하지 않으면 렌더링되지 않는다

12. 업다운 실습

+ 버튼 클릭 시 숫자가 1씩 증가
- 버튼 클릭 시 숫자가 1씩 감소 (단, 0 미만 불가)

속성 접근 기본

innerText, innerHTML → 텍스트 변경
value → 입력값 접근
type, src, className, style 등 속성 직접 접근/수정 가능

코드 예제

<p id="number">0</p>
<button id="btn_plus">+</button>
<button id="btn_minus">-</button>

<script>
  const plus = () => {
    document.getElementById("number").innerText =
      Number(document.getElementById("number").innerText) + 1;
  };

  const minus = () => {
    const current = Number(document.getElementById("number").innerText);
    if (current > 0) {
      document.getElementById("number").innerText = current - 1;
    }
  };

  document.getElementById("btn_plus").addEventListener("click", plus);
  document.getElementById("btn_minus").addEventListener("click", minus);
</script>

13. 속성 변경 실습: 비밀번호 보이기

목표

버튼 클릭 시 비밀번호 input의 type 속성을 text로 전환 → 비밀번호 노출
한 번 더 클릭 시 다시 password로 변경

비밀번호: <input type="password" id="input">
<button id="btn">비밀번호 보이기</button>

<script>
  const change_type = () => {
    const input = document.getElementById("input");
    input.type = input.type === "password" ? "text" : "password";
  }

  document.getElementById("btn").addEventListener("click", change_type);
</script>

14. 복수 요소 처리 실습

개념

getElementsByTagName, getElementsByClassName 등으로 가져온 결과는 HTMLCollection (유사 배열)
반복문 가능하지만 map, filter, push 등은 사용 불가
→ Array.from()을 사용해 배열로 변환 필요

코드 예제

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JS</li>
</ul>
<button id="btn">li태그 출력</button>

<script>
  const print = () => {
    const li = document.getElementsByTagName("li");
    for (let i = 0; i < li.length; i++) {
      console.log(li[i].innerText);
    }

    const arr = Array.from(li);
    console.log("배열 변환:", arr);
  }

  document.getElementById("btn").addEventListener("click", print);
</script>