3. 반복문을 활용한 DOM 제어
3. 반복문을 활용한 DOM 제어 (Loop with DOM)

3. 반복문을 활용한 DOM 제어
3. 반복문을 활용한 DOM 제어 (Loop with DOM)

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>3. 반복문을 활용한 DOM 제어</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        max-width: 800px;
        margin: 50px auto;
        padding: 20px;
      }
      .section {
        margin: 30px 0;
        padding: 20px;
        background: #f5f5f5;
        border-radius: 5px;
      }
      button {
        padding: 10px 20px;
        margin: 5px;
        cursor: pointer;
        background: #9c27b0;
        color: white;
        border: none;
        border-radius: 5px;
      }
      button:hover {
        background: #7b1fa2;
      }
      .item {
        padding: 15px;
        margin: 10px 0;
        background: white;
        border-radius: 5px;
        border-left: 4px solid #9c27b0;
      }
    </style>
  </head>
  <body>
    <h1>3. 반복문을 활용한 DOM 제어 (Loop with DOM)</h1>

    <div class="section">
      <h2>예제1: 기존 데이터 처음에 뿌리기</h2>
      <button onclick="displayOriginal()">기존 데이터 표시</button>
      <div id="result1"></div>
    </div>

    <div class="section">
      <h2>예제2: map으로 수정해서 뿌리기</h2>
      <button onclick="displayWithMap()">map으로 수정해서 표시</button>
      <div id="result2"></div>
    </div>

    <div class="section">
      <h2>예제3: 전개연산자로 추가해서 뿌리기</h2>
      <button onclick="displayWithSpread()">전개연산자로 추가해서 표시</button>
      <div id="result3"></div>
    </div>

    <div class="section">
      <h2>예제4: filter로 조건에 맞는 데이터 뿌리기</h2>
      <button onclick="displayWithFilter()">
        filter로 조건에 맞는 데이터 표시
      </button>
      <div id="result4"></div>
    </div>

    <script>
      // 기존 데이터 컬렉션
      const list = ["사과", "딸기", "바나나", "오렌지"];

      // 예제1: 기존 데이터 처음에 뿌리기
      function displayOriginal() {
        // 1. result1 찾기
        let dom = document.querySelector("#result1");

        // 2. 기존 result1에 데이터 초기화하기
        dom.innerHTML = "";

        // 3. list만큼 for문 돌면서 -> div class="item" 만들어서 append 하기
        list.forEach((i) => {
          let myItem = document.createElement("div");
          myItem.innerHTML = i;
          myItem.setAttribute("class", "item");

          dom.append(myItem);
        });
      }

      // 예제2: map으로 수정해서 뿌리기
      function displayWithMap() {
        // 1. result2 찾기
        let dom = document.querySelector("#result2");

        // 2. 기존 result2에 데이터 초기화하기
        dom.innerHTML = "";

        // 3. map으로 수정
        let newList = list.map((i) => `[수정]  ${i}`);

        // 4. list만큼 for문 돌면서 -> div class="item" 만들어서 append 하기
        newList.forEach((i) => {
          let myItem = document.createElement("div");
          myItem.innerHTML = i;
          myItem.setAttribute("class", "item");

          dom.append(myItem);
        });
      }

      // 예제3: 전개연산자로 추가해서 뿌리기
      function displayWithSpread() {
        // 1. result3 찾기
        let dom = document.querySelector("#result3");

        // 2. 기존 result3에 데이터 초기화하기
        dom.innerHTML = "";

        // 3. 전개연산자 수정
        let newList = ["포도", "수박", ...list];

        // 4. list만큼 for문 돌면서 -> div class="item" 만들어서 append 하기
        newList.forEach((i) => {
          let myItem = document.createElement("div");
          myItem.innerHTML = i;
          myItem.setAttribute("class", "item");

          dom.append(myItem);
        });
      }

      // 예제4: filter로 조건에 맞는 데이터 뿌리기 (글자길이 3 이상만!!)
      function displayWithFilter() {
        // 1. result4 찾기
        let dom = document.querySelector("#result4");

        // 2. 기존 result4에 데이터 초기화하기
        dom.innerHTML = "";

        // 3. 필터링
        let newList = list.filter((i) => i.length >= 3);

        // 4. list만큼 for문 돌면서 -> div class="item" 만들어서 append 하기
        newList.forEach((i) => {
          let myItem = document.createElement("div");
          myItem.innerHTML = i;
          myItem.setAttribute("class", "item");

          dom.append(myItem);
        });
      }
    </script>
  </body>
</html>