본문 바로가기
프로그래밍 공부/jQuery

jQuery - 문서 객체 조작

신입사원 최종원 2019. 12. 24. 14:09

기존에 자바스크립트에서 문서 객체 모델(DOM, Document Object Model)을 배웠는데 jQuery를 이용하면 복잡한 문서 객체 모델을 쉽게 다룰 수 있게 된다.

문서 객체의 게터(Getter)와 세터(Setter)

jQuery를 적용하는 방법에는 여러가지가 존재한다. 먼저 jQuery에서 $란 jQuery를 나타내는 식별자이다. 실제로 jQuery의 스크립트를 열어보면 'window.jQuery = window.$ = jQuery라는 문장을 찾을 수 있다. jQuery라는 식별자를 사용해도 인식이 되고 $를 써도 jQuery로 인식이 된다. 게터와 세터의 차이점은 세터(Setter)는 jQuery 객체를 리턴하고, 게터(Getter)는 매개변수를 하나만 사용하고 문자열을 리턴한다.

세터(Setter) 게터(Getter)
(문자열, 문자열) (객체) (함수) (문자열)

<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
 <script>
     // 1. 세터(Setter)

          // A. (문자열, 문자열)
          $("h1").css("color", "red")

          // B. (객체)
          $("h1").css({
               "color" : "green",
               "background-color" : "orange",
               "text-align" : "center"
          })
          $("h1").css({
               color : "blue", backgroundColor : "orange", textAlign : "center"
          })

          // C. (함수)
          let array1 = ["red", "green", "blue"];
          let array2 = ["blue", "red", "green"];
          $("h1").css("color", function(i){
               return array1[i];
          })
          $("h1").css("background-color", function(i){
               return array2[i];
          })

     // 2. 게터(Getter)
     let color = $("h1").css("color")
     alert(color);
</script>

게터의 경우는 선택된 태그나 클래스의 속성을 선택해 그 속성의 내용을 확인할 수 있다.

메서드 이름 설명
css() 스타일과 관련된 모든 기능을 수행한다.

css() 메서드는 선택된 태그나 클래스의 css의 style을 변경할 수 있는 메서드 이다.

<img>
<img>
<img>
 <script>
     // 1. 세터(Setter)
     $("img").attr("src", "http://placehold.it/100x100")
     $("img").attr({
          "src" : function(i){
               return "http://placehold.it/100x" + ((i + 1) * 100)
          },
          "alt" : "test image"
     })

     // 2. 게터(Getter)
     let img = $("img").attr("src")
     alert(img);
</script>

attr() 메서드로 이미지 태그에 src 속성이나 alt 속성등을 넣을 수 있다.

메서드 이름 설명
attr() 속성과 관련된 모든 기능을 수행한다.
removeAttr() 문서 객체의 속성을 제거한다.

<h2></h2>
<h2></h2>
 <h2></h2>
<script>
     // 1. 세터(Setter)
     $("h2").html("Hello jQuery")
     $("h2").html(function(i){
          return "Hello jQuery - "+ (i + 1);
     })
     $("h2").html("</img src='http://placehold.it/100x100'>Hello jQuery")

     // 2. 게터(Getter)
     let html = $("h2").html();
     alert(html);
</script>

html() 메서드는 문서 객체 내부의 글자에 관련된 모든 기능을 수행한다, 비슷한 메서드로 text()가 있는데 차이점은 html() 메서드는 HTML 태그를 인식한다.

메서드 이름 설명
html() 문서 객체 내부의 글자와 관련된 모든 기능을 수행한다.(HTML 태그 인식)
text() 문서 객체 내부의 글자와 관련된 모든 기능을 수행한다.

$("h2").html("</img src='http://placehold.it/100x100'>Hello jQuery")의 html() 메서드를 보면 HTML 이미지 태그를 그대로 넣었는데 html() 메서드이기 때문에 HTML 태그로 인식을 해서 이미지 태그로 작동이 된다.

jQuery 문서 객체 게터, 세터.html
0.00MB

문서 객체의 클래스 속성 생성 / 제거

메서드 이름 설명
addClass() 문서 객체의 클래스 속성을 추가한다.
removeClass() 문서 객체의 클래스 속성을 제거한다.
hasClass() 특정 문서 객체가 특정 클래스 속성을 가지고 있는지 확인한다.
$() 문서 객체를 생성한다.
remove() 문서 객체를 제거한다.
empty() 문서 객체 내부를 비운다.

<!DOCTYPE html>
<html>
<head>
     <title>Document</title>
     <script src="jquery-3.4.1.js"></script>
     <script>
          window.onload=function(){
               $("h1").addClass("header text-log");
               let outputA = $("h1").hasClass("header")
               let outputB = $("h1").hasClass("text-log")

               $("<h2></h2>").html(outputA.toString()).appendTo("body")
               $("<h2></h2>").html(outputB.toString()).appendTo("body")

               setTimeout(function(){
                    $("h1").removeClass("header text-log")
               }, 2000);

               setTimeout(function(){
                    $("h2").remove();
               }, 5000);
          }
     </script>
     <style>
          .header { text-align: center; }
          .text-log { color: blue; }
     </style>
</head>
<body>
     <h1>Hello jQuery</h1>
</body>
</html>

미리 클래스 선택자로 특정한 클래스 속성에 style을 입혀두고 동적으로 태그에 클래스를 추가하거나 지우는 코드이다.

jQuery 문서 객체 클래스.html
0.00MB

문서 객체 삽입 / 이동

jQuery에서 문서 객체를 삽입하는 메서드는 총 8개가 존재한다.

메서드 이름 설명
$(A).appendTo(B) A를 B의 뒷부분에 추가한다.
$(A).pretendTo(B) A를 B의 앞부분에 추가한다.
$(A).insertAfter(B) A를 B의 뒤에 추가한다.
$(A).insertBefore(B) A를 B의 앞에 추가한다.
$(A).append(B) B를 A의 뒷부분에 추가한다.
$(A).pretend(B) B를 A의 앞부분에 추가한다.
$(A).after(B) B를 A의 뒤에 추가한다.
$(A).before(B) B를 A의 앞에 추가한다.

append, pretend, after와 before를 쉽게 이해하려면 아래의 그림을 참고한다.

더 자세하게 알아보면, 먼저 body를 중심으로 사용하게 되면 아래와 같다.

insertBefore과 insertAfter는 대상이된 body 태그 밖의 위와 아래에 생성이 되고,  pretend와 append는 각각 body태그의 맨 위와 맨 아래에 생성되는 것을 알 수 있다. To가 붙지 않으면 A와 B가 반대로 적용이 된다는 것을 제외하고 같다.

<!DOCTYPE html>
<html>
<head>
     <title>Document</title>
     <script src="jquery-3.4.1.js"></script>
     <script>
          window.onload=function(){
               $("h1").appendTo("body");
          }
     </script>
</head>
<body>
     <h1>jQuery</h1>
     <h2>JavaScript</h2>
     <h3>HTML5 & CSS3</h3>
</body>
</html>

이동에 경우에도 위의 8개의 메서드를 이용해서 이동 시킬 수 있다. 위의 코드를 이동시키지 않는다고 가정을 하면 아래와 같은 결과가 나온다.

여기서 h1태그를 appentTo()를 이용해 대상을 body 태그로 지정을 하면(위의 코드와 같이) 아래와 같은 결과가 나온다.

jQuery 문서 객체 이동.html
0.00MB

문서 객체 복사

메서드 이름 설명
clone() 문서 객체를 복제한다.

원래 clone() 메서드는 3가지 형태가 존재한다.

1. $(selector).clone()
2. $(selector).clone(Boolean dataAndEvents)
3. $(selector).clone(Boolean dataAndEvents, Boolean deepDataAndEvents)

2번과 3번은 이벤트를 사용할 때 사용하게 된다. 1번을 이용해서 문서 객체를 복제 할 수 있다.

<!DOCTYPE html>
<html>
<head>
     <title>Document</title>
     <script src="jquery-3.4.1.js"></script>
     <script>
           $(document).ready(function(){
                $('div').append($('h1').clone());
           })
     </script>
</head>
<body>
     <h1>HEADER</h1>
     <hr><div></div><hr>
</body>
</html>

문서 객체 복사.html
0.00MB

'프로그래밍 공부 > jQuery' 카테고리의 다른 글

jQuery - 캔버스 애니메이션을 위한 틀  (0) 2019.12.30
jQuery - 효과  (0) 2019.12.30
jQuery - 이벤트 下  (0) 2019.12.27
jQuery - 이벤트 上  (0) 2019.12.27
jQuery - jQuery 자바스크립트 라이브러리  (0) 2019.12.23

'프로그래밍 공부/jQuery' Related Articles

티스토리툴바