JavaScript

[JS] 6. DOM 조작

최재원's avatar
최재원
Apr 01, 2025
[JS] 6. DOM 조작
Contents
1. DOM style 변경1. 숨기기2. 나타내기3. 추가하기4. 삭제하기

1. DOM style 변경

1. 숨기기

1. display:none

notion image
notion image

2. visibility:hidden

notion image
notion image

3. innerHTML = “”;

notion image
notion image

전체 코드

<!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="empty()">박스내부 날리기</button>
        <div class="box" id="outerBox">
            <div class="box" id="innerBox1">내부박스1</div>
            <div class="box" id="innerBox2">내부박스2</div>
        </div>

        <script>
            function hideDisplay() {
                let el = document.querySelector("#innerBox1");
                el.style.display = "none";
            }
            function hideVisible() {
                let el = document.querySelector("#innerBox2");
                el.style.visibility = "hidden";
            }
            function empty() {
                let el = document.querySelector("#outerBox");
                // el.innerHTML = "";
                console.log(el.children);
                let cs = el.children;
                // cs[0].style.display = "none";
                Array.from(cs).forEach((element) => {
                    element.style.display = "none";
                });
            }
        </script>
    </body>
</html>

2. 나타내기

1. display:block

notion image
notion image

1. visibility:visible

notion image
notion image

전체 코드

<!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. 추가하기

1. append

notion image
notion image

2. prepend

notion image
notion image

3. after

notion image
notion image

4. before

notion image
notion image

전체 코드

<!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 addAppend() {
                let newEl = document.createElement("div");
                newEl.setAttribute("class", "box");
                newEl.setAttribute("id", "innerBox1");
                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. 삭제하기

1. 단일 요소 삭제

notion image
notion image
코드
<!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>

2. 여러 요소들 중 특정 요소 삭제

notion image
notion image
코드
<!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: 0 4px 4px 0 grey;
                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++;
            }

            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>
 
Share article

More articles

See more posts

[JS] 8. 비동기 통신

April 1, 2025
[JS] 8. 비동기 통신

[JS] 7. json

April 1, 2025
[JS] 7. json

[JS] 5. 이벤트

April 1, 2025
[JS] 5. 이벤트

[프로그래머스] (MySQL) 31. 나이 정보가 없는 회원 수 구하기

March 31, 2025
[프로그래머스] (MySQL) 31. 나이 정보가 없는 회원 수 구하기

jjack1

RSS·Powered by Inblog