티스토리 뷰

Programming/JavaScript, jQuery

[jQuery 4강] 제이쿼리 DOM (문서객체)

국브 2019. 3. 28. 00:00

 [jQuery 4강] 제이쿼리 DOM (문서객체)


이번글에서는 제이쿼리 DOM 에대해서 알아보겠습니다.

이전에 앞서 자바스크립트에서 DOM 을 알아보았습니다.

Document Object Model 의 약자로 HTML 태그와 관련된 객체입니다.

자바스크립트에서 객체를 선택하여 객체를 이동 및 이동 삭제를 사전에 해보았습니다.

이번에는 제이쿼리를 통해 객체를 생성, 삽입, 이동, 복제 하는 방법에 대해서 자세히 알아보도록 하겠습니다.

글에 들어가기전 이전글들을 링크해두겠습니다.


 이전 글 링크 


2019/03/22 - [Programming/JavaScript, jQuery] - [jQuery 1강] 제이쿼리 개요 및 개발환경구축

2019/03/26 - [Programming/JavaScript, jQuery] - [jQuery 2강] 제이쿼리 기본문법

2019/03/27 - [Programming/JavaScript, jQuery] - [jQuery 3강] 선택자



 객체 생성


제이쿼리에서 객체 생성방법은 정말 간결하고 쉽습니다.

방법은 다음과 같습니다.


 사용방법 및 문법 


$("생성할 HTML 태그입력")



 예제 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    
    $(document).ready(function(){
        
        //아이디 선택자로 객체(요소)선택
        var divOb = $("<div>안녕하세요!</div>");
        
        //체이닝기법으로 연결해서 작성해도 됩니다.
        divOb.css("background","#000000").css("color","#ffffff");
        
        
        //제이쿼리 기본함수 append 어떤 요소에 마지막 자식 요소를 새로 추가합니다.
        $("#wrap").append(divOb);
        
    });
 
</script>
</head>
<body>
    <div id="wrap"></div>
</body>
</html>
cs


 실행결과 및 설명 

 

실행결과는 위의 이미지와 같습니다.


HTML 영역부터 살펴보도록 하겠습니다.

<div id="wrap"></div>

아이디가 wrap 인 div 요소가 있습니다.


그럼이제 스크립트 영역을 살펴보도록 하겠습니다.

       //아이디 선택자로 객체(요소)선택
        var divOb = $("<div>안녕하세요!</div>");
        
        //체이닝기법으로 연결해서 작성해도 됩니다.
        divOb.css("background","#000000").css("color","#ffffff");
        
        
        //제이쿼리 기본함수 append 어떤 요소에 마지막 자식 요소를 새로 추가합니다.
        $("#wrap").append(divOb);

스크립트의 영역에서 첫번째로 객체생성을 해주었습니다.

var divOb = $("<div>안녕하세요!</div>");

div 태그안에 "안녕하세요!" 라는 내용이 적힌 객체를 divOb 라는 변수에 담아주었습니다.


divOb.css("background","#000000").css("color","#ffffff");

그다음 체이닝 기법을 사용하요 css를 넣어주었고


$("#wrap").append(divOb);

이렇게 생성된 객체를 append 함수를 사용하여 아이디가 wrap 인 요소에 넣어주었습니다.

(append 함수는 하단에 설명되어있습니다.)


그결과 위와같은 화면이 출력되는것을 확인할수 있습니다.




 객체 삽입/추가 (append, appendTo, prepend, prependTo, insertAfter, after, insertBefore, before)


이미 위에서 객체삽입에 대한 append 함수를 사용해보았습니다.

객체삽입에는 append 뿐만아니라 append, appendTo, prepend, prependTo, insertAfter, after, insertBefore, before 등

많은 종류의 제이쿼리 함수가 있습니다.

기능은 모두 비슷합니다. 편하신걸로 사용하면 됩니다.

그럼 하나씩 살펴보도록 하겠습니다.


 사용방법 및 문법 


1. append 함수


append();


지정한 요소의 마지막에 내용(객체)을 추가합니다. 


2.appendTo 함수


appendTo();

지정한 요소의 마지막에 내용(객체)을 추가합니다.

append 와 appendTo의 다른점은 다음과 같습니다.


-예시-

A.append(B) - A에 B를 추가

A.appendTo(B) - B에 A를 추가


3.prepend 함수


prepend();

지정한 요소의 시작 부분에 내용(객체)을 삽입


4.prependTo 함수


prependTo();

지정한 요소의 시작 부분에 내용(객체)을 삽입

prepend 와 prerendTo의 다른점은 다음과 같습니다.


-예시-

A.prepend(B) - A에 B를 추가

A.prerendTo(B) - B에 A를 추가


5.insertAfter 함수


insertAfter();

지정한요소 뒷부분에 형제 내용을 삽입합니다.


6.after 함수


after();

지정한요소 뒷부분에 형제 내용을 삽입합니다.

insertAfter와 동일하지만 사용하는 위치가 다른것의 차이가 있습니다.


-예시-

A.after(B) - A에 B를 추가

A.insertAfter(B) - B에 A를 추가


7.insertBefore 함수


insertBefore();

지정한요소 앞부분에 형제 내용을 삽입합니다.


8.before 함수


before();

지정한요소 앞부분에 형제 내용을 삽입합니다.

insertBefore와 동일하지만 사용하는 위치가 다른것의 차이가 있습니다.


-예시-

A.before(B) - A에 B를 추가

A.insertBefore(B) - B에 A를 추가



 예제 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    
    $(document).ready(function(){
        
        //아이디 선택자로 객체(요소)선택
        var divOb = $("<div>안녕하세요!</div>");
        
        //체이닝기법으로 연결해서 작성해도 됩니다.
        divOb.css("background","#ffe400").css("color","#ffffff");
        
        //clone 함수는 복제하는 함수입니다.
        $("#wrap1").append(divOb.clone());
        $(divOb.clone()).appendTo("#wrap2");
        $("#wrap3").prepend(divOb.clone());
        $(divOb.clone()).prependTo("#wrap4");
        $("#wrap5").after(divOb.clone());
        $(divOb.clone()).insertAfter("#wrap6");
        $("#wrap7").before(divOb.clone());
        $(divOb.clone()).insertBefore("#wrap8");
        
    });
 
</script>
<style type="text/css">
    .space {
        background-color: black;
        color: white;
    }
</style>
</head>
<body>
    <div id="wrap1">
        <div class="space">append 영역</div>
    </div>
    <br/>
    <div id="wrap2">
        <div class="space">appendTo 영역</div> 
    </div>
    <br/>
    <div id="wrap3">
        <div class="space">prepend 영역</div> 
    </div>
    <br/>
    <div id="wrap4">
        <div class="space">prerendTo 영역</div> 
    </div>
    <br/>
    <div id="wrap5">
        <div class="space">insertAfter 영역</div> 
    </div>
    <br/>
    <div id="wrap6">
        <div class="space">after 영역</div> 
    </div>
    <br/>
    <div id="wrap7">
        <div class="space">insertBefore 영역</div>
    </div>
    <br/>
    <div id="wrap8">
        <div class="space">before 영역</div>
    </div>
</body>
</html>
cs


 실행결과 및 설명 

 


실행결과 위와같이 화면이 출력됩니다.


HTML 영역부터 확인해보겠습니다.

   <div id="wrap1">
        <div class="space">append 영역</div>
    </div>
    <br/>
    <div id="wrap2">
        <div class="space">appendTo 영역</div> 
    </div>
    <br/>
    <div id="wrap3">
        <div class="space">prepend 영역</div> 
    </div>
    <br/>
    <div id="wrap4">
        <div class="space">prerendTo 영역</div> 
    </div>
    <br/>
    <div id="wrap5">
        <div class="space">insertAfter 영역</div> 
    </div>
    <br/>
    <div id="wrap6">
        <div class="space">after 영역</div> 
    </div>
    <br/>
    <div id="wrap7">
        <div class="space">insertBefore 영역</div>
    </div>
    <br/>
    <div id="wrap8">
        <div class="space">before 영역</div>
    </div>

아이디가 wrap1 ~ wrap8 까지 총 8개의 div 를 생성하였습니다.

그리고 각자 space 라는 클레스를 같는 div를 갖고 있습니다.

(들어가는 순서비교를 위하여 넣어주었습니다 ㅎ)


그럼이제 스크립트 영역을 확인해보겠습니다.

       //아이디 선택자로 객체(요소)선택
        var divOb = $("<div>안녕하세요!</div>");
        
        //체이닝기법으로 연결해서 작성해도 됩니다.
        divOb.css("background","#ffe400").css("color","#ffffff");
        
        //clone 함수는 복제하는 함수입니다.
        $("#wrap1").append(divOb.clone());
        $(divOb.clone()).appendTo("#wrap2");
        $("#wrap3").prepend(divOb.clone());
        $(divOb.clone()).prependTo("#wrap4");
        $("#wrap5").after(divOb.clone());
        $(divOb.clone()).insertAfter("#wrap6");
        $("#wrap7").before(divOb.clone());
        $(divOb.clone()).insertBefore("#wrap8");

우선 첫번째로 객체를 만들어 주었습니다.

var divOb = $("<div>안녕하세요!</div>");

이렇게 생성된 div 객체를 css 를 적용해주었습니다.

divOb.css("background","#ffe400").css("color","#ffffff");


그다음 여러종류의 삽입 함수에 생성된 객체를 복제하여 넣어주었습니다. 

(clone 함수는 하단에 설명되었습니다.)


그결과 위와같은 화면을 확인할수 있으며

기능면으로 분류해본다면

마지막 영역에 추가되는것은 append, appendTo, after, insertAfter 이고

시작 영역에 추가되는것은 prepend, prependTo, before, insertBefore 입니다.


즉.. 기능이 비슷하기때문에 자신이 편리한것을 사용하면 됩니다ㅎ 




 객체 이동


객체 이동은 위에서 객체 삽입/추가 함수를 사용하면 됩니다.

사용방법은 동일하기에 생략하며 바로 예제로 들어가도록 하겠습니다.


 사용방법 및 문법 

-


 예제 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    
    $(document).ready(function(){
        
        $("#wrap1").prepend($("#space2"));
        
    });
 
</script>
<style type="text/css">
    .space {
        background-color: black;
        color: white;
    }
    .space2 {
        background-color: yellow;
        color: black;
    }
</style>
</head>
<body>
    <div id="wrap1">
        <div class="space">첫번째 블록</div>
        <div id="space2" class="space2">두번째 블록</div>
    </div>
</body>
</html>
cs


 실행결과 및 설명 

 

위의 실행결과 블록의 위치가 변경된것을 확인할수 있습니다.


HTML 영역을 먼저 살펴보겠습니다.

   <div id="wrap1">
        <div class="space">첫번째 블록</div>
        <div id="space2" class="space2">두번째 블록</div>
    </div>

이렇게 첫번째 블록, 두번째 블록 순서대로 생성을 해주었습니다.


그럼이제 스크립트의 영역을 살펴보도록하겠습니다.

$("#wrap1").prepend($("#space2"));

스크립트의 영역에서는 아이디가 wrap1 인 요소를 선택해 주었고 prepend 함수를 사용하여 내용을 추가해주었습니다.

prepend 영역을 살펴보면 $("#space2")  아이디가 space2 인 요소를 선택하여 들어가 있습니다.


즉 wrap1 영역에 있는 space2요소를 시작부분쪽으로 다시 넣어준것입니다.

그결과 순서가 변경되어 위와같은 결과를 얻을수있습니다. 




 객체 복제 ( clone )


제이쿼리에서는 객체를 쉽게 복사할수있는 함수가있습니다.

바로 clone 함수입니다.

동적인 페이지를만들기 위해 빈번히 사용되는 함수입니다.

사용방법은 다음과 같습니다.


 사용방법 및 문법 


$(복사할객체).clone();



 예제 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    
    $(document).ready(function(){
        
        $("#wrap1").prepend($("#wrap1 div").clone());
        
    });
 
</script>
<style type="text/css">
    .space {
        background-color: black;
        color: white;
    }
</style>
</head>
<body>
    <div id="wrap1">
        <div class="space">블록</div>
    </div>
</body>
</html>
cs


 실행결과 및 설명 

 


실행결과는 위와같이 복제되어 2개의 "블록" 이 생성되었습니다.


우선 HTML 구문을 살펴보면

   <div id="wrap1">
        <div class="space">블록</div>
    </div>

이렇게 "블록" 이라는 요소가 1개 뿐인걸 확인할수 있습니다.


그럼 스크립트 영역을 살펴보도록 하겠습니다.

$("#wrap1").prepend($("#wrap1 div").clone());

아이디가 "wrap1" 인요소를 제이쿼리로 선택하였고 그다음 prepend 함수를 사용하여 객체를 추가하려합니다.

 prepend 영역에 보시면 $("#wrap1 div") 요소를 선택해주고 clone 함수를 사용하여 복제하였습니다.


즉 wrap1 영역에 "블럭" 이라는 div 요소를 복제하여 추가한것입니다.

그결과 위와같은 결과를 확인할수 있습니다.




 글을 마치며..


이렇게해서 제이쿼리 DOM 에대해서 알아보았습니다.

실무에서도 빈번히 사용되는만큼 자주사용되는 위주의 기능들을 작성하였습니다.

오늘 알아본 내용들을 꼭! 숙지하시기 바랍니다 ㅎ

모두 수고하세요!


도움이 되셨다면 로그인 없이 가능한

아래 하트♥공감 버튼을 꾹 눌러주세요! 




저작자표시 비영리 변경금지

'Programming > JavaScript, jQuery' 카테고리의 다른 글

[jQuery 6강] 제이쿼리 이벤트  (0) 2019.03.30
[jQuery 5강] 제이쿼리 기본함수 (기본 메서드)  (0) 2019.03.29
[jQuery 3강] 선택자  (0) 2019.03.27
[jQuery 2강] 제이쿼리 기본문법  (0) 2019.03.26
[jQuery 1강] 제이쿼리 개요 및 개발환경구축  (0) 2019.03.22
댓글