[자바스크립트] DOM 나타내기 (4)

DOM 나타내기(바닐라, jQuery 비교)

mmmmmm02

Aug 31, 2024

Contents

DOM 나타내기

프로젝트를 앞둔 나, 작업 효율성을 높이기 위해 순수 바닐라 자바스크립트 (Vanilla JavaScript) 로 할지, 제이쿼리(jQuery) 로 할지 둘 다 사용해보면서 비교해보자.

이전에 배운 내용과 이어서 실제 사이트에서의 DOM 사용 예시를 생각하면서 공부해보자. 내가 프로젝트를 하면서 실제로 적용을 해봐야하니까^^

style 로 날린건지, DOM 을 날린건지 꼭 확인해보아야 한다. (댓글 삭제의 경우, DOM 을 날린 것이다.)

댓글을 적고 등록을 누르면 댓글 박스 안에 추가 되는데,

DOM 을 넣어야 한다.

삭제 누르면 → 서버에 삭제 요청하고 DB 에 날라가고 → 잘 지워졌어~ 하고 날라오면 F5 를 누르지 않아도 바로 삭제되는게 CSR(클라이언트사이드 렌더링) 방식.

DOM 나타내기

DOM 숨기기를 해봤으니, 나타내기 기능도 해보자. 아래는 전체 코드

바닐라 자바스크립트 (Vanilla JavaScript) 사용


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

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

style.display =”block” 은 CSS 의 디스플레이 속성 중 block 기능(한 줄을 다 차지)을 의미한다.


function showByDisplay() {
      let el = document.querySelector("#innerBox1");
      el.style.display = "block"; /*끝까지 다 차지해봐*/
}

숨기기 할 때, style.visibility = “hidden” 으로 영역만 남겨두고 사라지게 했다면,

style.visibility = "visible" 은 보이게 하는 것.


function showByVisible() {
      let el = document.querySelector("#innerBox2");
      el.style.visibility = "visible";
}

제이쿼리(jQuery) 사용

같은 기능을 제이쿼리로 써보자.

제이쿼리 쓸 때는, 참고 링크에서 제이쿼리 라이브러리 필수로 가져오기.

W3Schools.com → JQUERY 메뉴

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

https://www.w3schools.com/

W3Schools 에서 공부 할 때에는 딱 아래의 범위 만치만 봐도 된다. ^^ 그 외에는 필요할 때 가서 보고 쓰면 됨

jQuery css() 기능 중 아래는 getter 로 가져오는 예시이고,

지금은 나타내기의 기능이 필요하니 아래의 Set 기능을 써먹자.

제이쿼리 라이브러리를 사용하면 만들어진 CSS 기능이 있기 때문에, 더 간단한 코드로 표현이 가능하다.


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>


<script>
        function showByDisplay() {
            // /*바닐라 자바스크립트 순수*/
            // let el = document.querySelector("#innerBox1");
            // el.style.display = "block"; /*끝까지 다 차지해봐*/

            $("#innerBox1").css("display", "block");
        }
        function showByVisible() {
            // let el = document.querySelector("#innerBox2");
            // el.style.visibility = "visible";

            $("#innerBox2").css("visibility", "visible");
        }
</script>

Fade 라는 서서히 사라지게 하는 기능도 있음 ^^


<!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>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>

<body>
    <h1>나타내기</h1>
    <button onclick="showByDisplay()">display로 나타내기</button>
    <button onclick="showByVisible()">visible로 나타내기</button>
    <div class="box" id="outerBox">

        5. DOM 추가하기
        <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"; /*끝까지 다 차지해봐*/

            $("#innerBox1").css("display", "block");
            // $("#innerBox1").fadeIn;
        }
        function showByVisible() {
            // let el = document.querySelector("#innerBox2");
            // el.style.visibility = "visible";
            // console.log(el.style);
            // el.style.border = "1px solid red"; /*뿌리가 궁금하면 콘솔로 확인*/


            $("#innerBox2").css("visibility", "visible");
        }
    </script>
</body>

</html>

See more posts

[자바스크립트] DOM 나타내기 (4)

DOM 나타내기

바닐라 자바스크립트 (Vanilla JavaScript) 사용

제이쿼리(jQuery) 사용

More articles

[자바스크립트] 반복문으로 리스트 만들기 (6)

[자바스크립트] DOM 추가하기 (5)

[자바스크립트] DOM 숨기기 (3)

[자바스크립트] 이벤트 Event (2)