[ JS ] DOM 제어

환경 : Visual Studio Code

 

 

[ DOM 이란? ]

• Document Object Model(문서 객체 모델)
• HTML 문서를 객체화한 것
• HTML 문서를 브라우저가 이해할 수 있도록 만든 Tree 자료구조
• HTML, XML 문서의 프로그래밍 interface
• DOM은 문서의 구조화된 표현(structed representation)을 제공하며, 프록래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는 역할이다.

 

DOM 은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM을 수정할 수 있다.

 

그렇다. 우리가 JavaScript로 구현한 모든 동작들이 대체로 DOM을 수정하기 위한 것이었다... (새삼 충격)

 

JavaScript는 브라우저가 읽고 어떤 작업을 할 수 있는 언어.

DOM은 바로 이 작업이 이루어지는 장소인 것이다.

 

우리가 "JavaScript로 하는 것" 이라고 생각하는 것은 정확히는 "DOM API"이다.

 

출처 : https://geniee.tistory.com/32

 

 

 

[ DOM 탐색 명령 ]

 - DOM을 잘 하기 위해서 탐색 명령을 알아두는 것이 좋다. 

 

DOM 탐색 명령

 

 

---

[ DOM 제어1 - 등록 ]

실행 결과

 

[ 주요 코드 ]

<script type="text/javascript">
    $(function(){
         $(".btn-add").click(function(){//.btn-add를 클릭하면
             var value = $(".todo-input").val();//.todo-input의 값을 읽어
             if(value.length == 0) return;//미입력 차단
             var tag = $("<h3>").text(value);//<h3>태그를 만들고 글자 설정 후
             $(".result").append(tag);//.result의 안쪽 마지막에 추가
             $(".todo-input").val("");//입력값 삭제
         });
     });
</script>

 

 

[ DOM 제어2 - 등록 및 삭제 ]

    <script type="text/javascript">
        $(function(){
            $(".btn-add").click(function(){//.btn-add를 클릭하면
                var value = $(".todo-input").val();//.todo-input의 값을 읽어
                if(value.length == 0) return;//미입력 차단

                //추가하는 화면이 복잡해진다면..?
                //- 삭제 아이콘을 추가하여 배치
                var tag = $("<h3>").text(value);
                var x = $("<i>").addClass("fa-solid fa-xmark red");

                tag.append(x);//태그의 안쪽 마지막에 x를 추가

                $(".result").append(tag);//.result의 안쪽 마지막에 추가
                $(".todo-input").val("");//입력값 삭제
            });
        });
    </script>

 

 

[ DOM 제어3 - 수정 추가 ]

    <script type="text/javascript">
        $(function(){
            //삭제버튼 이벤트
            $(document).on("click", ".fa-xmark", function(){
                $(this).parent("h3").remove();
            });

            //수정버튼 이벤트
            //- 입력창을 만들어 값을 옮겨적고 완료,취소버튼까지 만들어 추가
            //- 기존 입력창은 숨김
            $(document).on("click", ".fa-edit", function(){
                var value = $(this).parent("h3").text();

                var input = $("<input>").val(value);
                var save = $("<i>").addClass("fa-solid fa-floppy-disk green");
                var cancel = $("<i>").addClass("fa-solid fa-ban red");
                var div = $("<div>");
                
                div.append(input).append(save).append(cancel);
                $(this).parent("h3").hide().after(div);//h3 숨기고 뒤에 추가
            });

            //수정 화면의 완료, 취소에 대한 이벤트
            $(document).on("click", ".fa-floppy-disk", function(){
                var value = $(this).prev("input").val();
                var x = $("<i>").addClass("fa-solid fa-xmark red");
                var edit = $("<i>").addClass("fa-solid fa-edit blue");
                $(this).parent("div").prev("h3").text(value)
                                            .append(edit).append(x);//글자변경
                $(this).parent("div").prev("h3").show();//기존것 표시
                $(this).parent("div").remove();//수정영역 삭제
            });
            $(document).on("click", ".fa-ban", function(){
                $(this).parent("div").prev("h3").show();//기존것 표시
                $(this).parent("div").remove();//수정영역 삭제
            });

            $(".btn-add").click(function(){//.btn-add를 클릭하면
                var value = $(".todo-input").val();//.todo-input의 값을 읽어
                if(value.length == 0) return;//미입력 차단
                
                var tag = $("<h3>").text(value);
                var x = $("<i>").addClass("fa-solid fa-xmark red");
                var edit = $("<i>").addClass("fa-solid fa-edit blue");//수정버튼

                tag.append(edit);//태그의 안쪽 마지막에 수정버튼을 추가
                tag.append(x);//태그의 안쪽 마지막에 삭제버튼을 추가

                $(".result").append(tag);//.result의 안쪽 마지막에 추가
                $(".todo-input").val("");//입력값 삭제
            });
        });
    </script>

 

 

 

---

[ 전체 코드 ] 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript 예제</title>

    <!-- 구글 폰트 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">

    <!-- 내가 구현한 스타일 -->
    <link rel="stylesheet" type="text/css" href="../css/commons.css">
    <link rel="stylesheet" type="text/css" href="../css/test.css">

    <!-- font awesome 아이콘 CDN -->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <style>
        
    </style>

    <!-- jquery cdn -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
    <!-- 내가 만든 스크립트 추가(jQuery를 사용했으니 jQuery CDN 아래 작성) -->
    <script src="commons.js"></script>
    <!-- javascript를 의도적으로 head 자리에 배치해서 가장 먼저 실행되도록 구현-->
    <script type="text/javascript">
        $(function(){
            //삭제버튼 이벤트
            $(document).on("click", ".fa-xmark", function(){
                $(this).parent("h3").remove();
            });

            //수정버튼 이벤트
            //- 입력창을 만들어 값을 옮겨적고 완료,취소버튼까지 만들어 추가
            //- 기존 입력창은 숨김
            $(document).on("click", ".fa-edit", function(){
                var value = $(this).parent("h3").text();

                var input = $("<input>").val(value);
                var save = $("<i>").addClass("fa-solid fa-floppy-disk green");
                var cancel = $("<i>").addClass("fa-solid fa-ban red");
                var div = $("<div>");
                
                div.append(input).append(save).append(cancel);
                $(this).parent("h3").hide().after(div);//h3 숨기고 뒤에 추가
            });

            //수정 화면의 완료, 취소에 대한 이벤트
            $(document).on("click", ".fa-floppy-disk", function(){
                var value = $(this).prev("input").val();
                var x = $("<i>").addClass("fa-solid fa-xmark red");
                var edit = $("<i>").addClass("fa-solid fa-edit blue");
                $(this).parent("div").prev("h3").text(value)
                                            .append(edit).append(x);//글자변경
                $(this).parent("div").prev("h3").show();//기존것 표시
                $(this).parent("div").remove();//수정영역 삭제
            });
            $(document).on("click", ".fa-ban", function(){
                $(this).parent("div").prev("h3").show();//기존것 표시
                $(this).parent("div").remove();//수정영역 삭제
            });

            $(".btn-add").click(function(){//.btn-add를 클릭하면
                var value = $(".todo-input").val();//.todo-input의 값을 읽어
                if(value.length == 0) return;//미입력 차단
                
                var tag = $("<h3>").text(value);
                var x = $("<i>").addClass("fa-solid fa-xmark red");
                var edit = $("<i>").addClass("fa-solid fa-edit blue");//수정버튼

                tag.append(edit);//태그의 안쪽 마지막에 수정버튼을 추가
                tag.append(x);//태그의 안쪽 마지막에 삭제버튼을 추가

                $(".result").append(tag);//.result의 안쪽 마지막에 추가
                $(".todo-input").val("");//입력값 삭제
            });
        });
    </script>
</head>
<body>

    <div class="container w-500">
        <div class="cell center">
            <h1>DOM 제어</h1>
        </div>
        <div class="cell">
            <input type="text" class="todo-input tool">
            <button class="btn positive btn-add">추가</button>
        </div>  

        <div class="cell result"></div>
    </div>

</body>
</html>

 

 

 

개인 공부 기록용입니다:)