[JavaScript] 08. DOM 제어

Apr 07, 2025

Contents

1. display / visible / innerHTML 로 박스 삭제하기 2. display / visible 로 박스 나타내기 3. append() / prepend() / after() / before()4. 요소 삭제하기 5. 동적으로 DOM 제어해보기

1. display / visible / innerHTML 로 박스 삭제하기

✅레이아웃

✅ display로 숨기기

⇒ 박스의 영역 자체가 사라짐

✅ visibility로 숨기기

⇒ 박스의 영역 자체가 사라지는 것이 아닌, 숨김처리되는 것

✅ innerHTML 로 숨기기

⇒ 바깥 박스 내부에 있는 모든 요소가 사라짐

✅ 전체 코드


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      .box {
        border: 1px solid black;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h1>숨기기</h1>
    <button onclick="hideDisplay()">display로 숨기기</button>
    <button onclick="hideVisible()">visible로 숨기기</button>
    <button onclick="mt()">박스 내부 날리기</button>
    <div class="box" id="outerBox">
      <div class="box" id="innerBox1">내부박스1</div>
      <div class="box" id="innerBox2">내부박스2</div>
    </div>

    <script>
      function mt() {
        let el = document.querySelector("#outerBox");
        // 1. innerHTML로 날리기
        //el.innerHTML = "";

        let cs = el.children;
        // 2. children/style로 날리기
        //cs[0].style.display = "none";

        //3. forEach문으로 날리기
        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>

2. display / visible 로 박스 나타내기


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      .box {
        border: 1px solid black;
        padding: 10px;
      }
      #innerBox1 {
        display: none;
      }
      #innerBox2 {
        visibility: hidden;
      }
    </style>
  </head>
  <body>
    <h1>나타내기</h1>
    <button onclick="showByDisplay()">display로 나타내기</button>
    <button onclick="showByVisible()">visible로 나타내기</button>
    <div class="box" id="outerBox">
      <div class="box" id="innerBox1">내부박스1</div>
      <div class="box" id="innerBox2">내부박스2</div>
    </div>

    <script>
      function showByDisplay() {
        let el = document.querySelector("#innerBox1");
        el.style.display = "block";
      }
      function showByVisible() {
        let el = document.querySelector("#innerBox2");
        el.style.visibility = "visible";
      }
    </script>
  </body>
</html>

3. append() / prepend() / after() / before()

📌

append() - 컨텐츠를 선택된 요소 내부의 끝 부분에 삽입

prepend() - 컨텐츠를 선택된 요소 내부의 시작 부분에 삽입

after() - 선택한 요소 뒤에 컨텐츠 삽입

before() - 선택한 요소 앞에 컨텐츠 삽입

📃

createElement / setAttribute

요소생성 / 속성부여(덮어쓰기됨)

* classList와 달리 setAttribute는 기존에 있던 속성이 사라지고 추가가 된다. 또한 클래스 뿐만이 아닌 다양한 태그의 속성들에 기여한다. classList는 태그의 클래스 속성에만 기여한다.


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      .box {
        border: 1px solid black;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h1>추가하기</h1>
    <button onclick="addAppend()">append로 추가하기</button>
    <button onclick="addPrepend()">prepend로 추가하기</button>
    <button onclick="addBefore()">before로 추가하기</button>
    <button onclick="addAfter()">after로 추가하기</button>
    <div class="box" id="outerBox"></div>

    <script>
      function del(e) {
        console.log(e.target);
        e.target.style.display = "none";
      }

      function addAppend() {
        let newEl = document.createElement("div");

        newEl.setAttribute("class", "box");
        newEl.setAttribute("onclick", "del(event)");
        newEl.innerHTML = "내부박스1";

        let el = document.querySelector("#outerBox");
        el.append(newEl);
      }
      function addPrepend() {
        let newEl = document.createElement("div");
        newEl.setAttribute("class", "box");
        newEl.setAttribute("id", "innerBox2");
        newEl.innerHTML = "내부박스2";

        let el = document.querySelector("#outerBox");
        el.prepend(newEl);
      }
      function addBefore() {
        let newEl = document.createElement("div");
        newEl.setAttribute("class", "box");
        newEl.setAttribute("id", "innerBox3");
        newEl.innerHTML = "내부박스3";

        let el = document.querySelector("#outerBox");
        el.before(newEl);
      }
      function addAfter() {
        let newEl = document.createElement("div");
        newEl.setAttribute("class", "box");
        newEl.setAttribute("id", "innerBox4");
        newEl.innerHTML = "내부박스4";

        let el = document.querySelector("#outerBox");
        el.after(newEl);
      }
    </script>
  </body>
</html>

4. 요소 삭제하기

📃

del이라는 함수를 만들어 지정된 요소를 지우는 코드 작성, 버튼 클릭 시 함수 호출되며 삭제


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      .box {
        border: 1px solid black;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h1>삭제하기</h1>
    <button onclick="del()">remove로 삭제하기</button>
    <div class="box" id="outerBox">
      <div class="box" id="innerBox1">내부박스1</div>
    </div>

    <script>
      function del() {
        let el = document.querySelector("#innerBox1");
        el.remove();
      }
    </script>
  </body>
</html>

5. 동적으로 DOM 제어해보기

📃

for문으로 값을 받아 만들어지는 카드에 아이디 값을 삽입.

카드 안에 있는 내용도 아이디 값을 받아 동적으로 그려질 수 있도록 구현.

삭제 역시 마찬가지, 해당 요소 클릭 시 자기 자신이 지워질 수 있도록 아이디 값을 받는다.


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

      .card {
        border: 1px solid lightgray;
        box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.13);
        padding: 10px;
        margin: 5px;
        border-radius: 5px;
      }
    </style>
  </head>
  <body>
    <h1>반복문으로 리스트 만들기</h1>
    <button onclick="render()">render</button>
    <div class="box" id="outerBox"></div>

    <script>
      //let id = 1;

      function render() {
        let el = document.querySelector("#outerBox");
        // el.append(makeCard(id));
        // id++;
        for (let i = 1; i < 5; i++) {
          el.append(makeCard(i));
        }
      }

      function makeCard(id) {
        let card = document.createElement("div");
        card.setAttribute("class", "card");
        card.setAttribute("id", "card-" + id);

        card.innerHTML = `
                <h3>제목${id} 입니다</h3>
                <p>내용${id} 입니다</p>
                <button onclick="del(${id})">삭제</button>
            `;
        return card;
      }

      function del(id) {
        let el = document.querySelector("#card-" + id);
        el.remove();
      }
    </script>
  </body>
</html>