[자바스크립트] 13. 이벤트 종류 (숨기기, 내용비우기)

Apr 02, 2025


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      .box {
        border: 1px solid black;
        padding: 10px;
      }

      .red-box {
        background-color: red;
      }
    </style>
  </head>

  <body>
    <h1>숨기기</h1>
    <button onclick="hideDisplay()">display로 숨기기</button>
    <button onclick="hideVisible()">visible로 숨기기</button>
    <button onclick="empty()">박스내부 날리기</button>
    <div class="box" id="outerBox">
      <div class="box" id="innerBox1">내부박스1</div>
      <div class="box" id="innerBox2">내부박스2</div>
    </div>

    <script>
      function empty() {
        let el = document.querySelector("#outerBox");
        //el.innerHTML = "";
        //console.log(el.children);
        let cs = el.children;
        console.log(cs);

        Array.from(cs).forEach((element) => {
          element.style.display = "none";
        });
      }

      function hideDisplay() {
        let el = document.querySelector("#innerBox1");
        el.style.display = "none";
      }
      function hideVisible() {
        let el = document.querySelector("#innerBox2");
        el.style.visibility = "hidden";
      }
    </script>
  </body>
</html>

메서드	숨김 방식	DOM 트리에 존재 여부	공간 차지 여부
`display = "none"`	화면에서 완전히 제거	❌ 존재하지 않음	❌ 차지하지 않음
`visibility = "hidden"`	화면에서 보이지 않음	✅ 존재함	✅ 차지함
`innerHTML = ""`	내용 초기화	❌ 요소 제거됨	❌ 차지하지 않음