티스토리 뷰

Frontend/jQuery

[생활코딩][웹브라우저JS]- jQuery의 node 제어 API

blueprint-12 2022. 2. 8. 20:49

jQuery 노드 변경 API

jQuery 를 이용해서 노드를 제어하는 방법을 알아봅시다. -> 노드를 제어하는 기능은 주로 Manipulation 카테고리에 속해있다. https://api.jquery.com/category/manipulation/

 

Manipulation | jQuery API Documentation

Adds the specified class(es) to each element in the set of matched elements. Insert content, specified by the parameter, after each element in the set of matched elements. Insert content, specified by the parameter, to the end of each element in the set of

api.jquery.com

jQuery 추가 API 

추가와 관련된 주요한 메소드는 4가지, 각각의 관계를 그림으로 나타내면 아래와 같다.

  • 위의 API를 이용해서 문서의 구조를 변경한 예시 코드 
     <body>
    <div class="target">content1</div>
    <div class="target">content2</div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
      $(".target").before("<div>before</div>"); 
      $(".target").after("<div>after</div>");
      $(".target").prepend("<div>prepend</div>");
      $(".target").append("<div>append</div>");
    </script>
  </body>​
  • 여기서 유의해야할 점은 target 클래스명을 가진 모든 요소에 적용된다는 점(content1과 content2 둘 다 적용됨)이다. 
  • 또한, before과 after의 경우 선택한 요소 뒤나 앞에 컨텐츠를 삽입하지만 prepend append의 경우는 컨텐츠를 선택된 요소 내부에 위치시킨다. 

jQuery 제거 API

제거와 관련된 API는 remove와 empty 가 있다.

  • .remove() 선택된 엘리먼트를 제거하는 것
  • .empty() 선택된 엘리먼트의 텍스트 노드를 제거하는 것(자식 노드들을 전부 제거 하는 것)
<script>
      //Remove the set of matched elements from the DOM.
      $("#btn1").click(function () {
        $("#target1").remove();
      });
      //Remove all child nodes of the set of matched elements from the DOM.
      $("#btn2").click(function () {
        $("#target2").empty();
      });
    </script>

-> 즉, 둘의 차이는 선택된 엘리먼트(태그)자체를 없애버리느냐 아니냐 차이인데 크롬으로 실행했을 때, empty의 경우에도 화면상에서 아예 사라진 것처럼 보였으나 개발자도구 -> Element로 확인해보면 empty의 경우 div태그가 사라진 것이 아니라 그대로 존재한다.  

remove의 경우 엘리먼트 자체가 삭제됨, empty의 경우 엘리먼트는 남아있다.

 

jQuery 바꾸기 API(교체, 복사,이동)

 

교체(노드를 교체하기)

replaceAll과 replaceWith는 모두 노드의 내용을 교체하는 API이다.

  • 두 메소드의 차이점은 구문(문법)에 있다. 
  • replaceAll은 제어 대상을 인자로 전달한다 (제어의 대상이 뒤에 오는 것)
    • $("<div>replaceAll</div>">).replaceAll("#target1");
  • replaceWith 제어 대상을 먼저 지정한다. (제어의 대상이 앞에 오는 것)
    • $("target1").replaceWith("<div>replaceWith</div>");

복사(노드를 복사하기)

위의 교체 메소드를 같이 활용해서 복사한 새 엘리먼트를 새롭게 기존에 있던 엘리먼트 자리로 대체해봅시다. 

->복사를 할 시 기존에 있던 원본이 사라지는 것은 아닙니다.

  • .clone() // Create a deep copy of the set of matched elements.
<body>
    <div class="target" id="target1">target1</div>
    <div class="target" id="target2">target2</div>
    <div id="source">source</div>
    <input type="button" value="replaceAll target1" id="btn1" />
    <input type="button" value="replaceWith target2" id="btn2" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
      //클래스명이 target인 부분을 클릭했을 때 아이디가 source인 것으로 변경하고 싶을 때
      $("#btn1").click(function () {
        //clone을 통해서 source를 복사하고 target1부분을 대체
        $("#source").clone().replaceAll("#target1");
      });

      $("#btn2").click(function () {
        $("#target2").replaceWith($("#source").clone());
      });
    </script>
  </body>

이동(노드를 이동하기)

  • 이동의 경우 맨처음에 배운 추가관련 API를 활용하면 되는데 그 이유는 Node 객체의 appendChild 메소드를 참고함녀 이해하기 쉬울 거 같습니다. 
  • dom manipulation API의 인자로 특정 노드를 선택하면 이동의 효과가 난다. 이 말은 즉 기존에 있던 특정 노드를 원하는 곳으로 추가 메소드(appned, after, before등..)를 활용하여 위치를 옮길 수 있으며 새로 노드를 생성하거나 삭제할 필요가 없다는 뜻입니다. 
    $("#btn1").click(function () {
        $("#target1").after($("#source"));
      });​
    위와 같은 식으로 clone을 사용하지 않고도 원하는 위치에 옮길 수 있습니다. 엘리멘트의 순서 역시 새롭게 정렬됩니다.

 

'Frontend > jQuery' 카테고리의 다른 글

[생활코딩][웹브라우저JS] - jQuery Ajax  (0) 2022.02.23
[생활코딩][웹브라우저JS] - jQuery 이벤트 관련 API  (0) 2022.02.16
[생활코딩][웹브라우저JS]- jQuery 속성(attr) 제어 API, jQuery 조회 범위 제한  (0) 2022.02.05
[생활코딩][웹브라우저JS]- jQuery 객체, jQuery API  (0) 2022.02.01
[생활코딩][웹브라우저JS]- 제어 대상을 찾기(feat. DOM, jQuery)  (0) 2022.01.28
댓글