DOM 실습 : 숨기고 나타내기

Feb 19, 2024

document에 el를 찾으면 DOM을 찾았다고 함

1. DOM 숨기기


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <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>
    <div class="box">
        <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";
        }
    </script>
</body>

</html>

2. JQuery로 숨기기


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <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>
    <div class="box">
        <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";
            $("#innerBox1").hide;
        }
        function hideVisible() {
            // let el = document.querySelector("#innerBox2");
            // el.style.visibility = "hidden";
            $("#innerBox2").css("visibility", "hidden");
        }
    </script>
</body>

</html>

3. 2번을 업그레이드하기

재사용 가능


function a(){
        $("#btn=hide1").hide();
       }

       $("#btn=hide1").click(a);
       $("#btn=hide1").click(b);


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <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>
    <div class="box">
        <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";
            $("#innerBox1").hide;
        }
        function hideVisible() {
            // let el = document.querySelector("#innerBox2");
            // el.style.visibility = "hidden";
            $("#innerBox2").css("visibility", "hidden");
        }
    </script>
</body>

</html>

4. DOM 나타내기


<!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>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <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> <div class="box"> <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"; } </script> </body> </html>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <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> <div class="box"> <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"; $("#innerBox1").hide; } function hideVisible() { // let el = document.querySelector("#innerBox2"); // el.style.visibility = "hidden"; $("#innerBox2").css("visibility", "hidden"); } </script> </body> </html>

<!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>