과목명: 웹프로그래밍응용교재: 모던웹을 위한 JavaScript Jquery 입문, 한빛미디어

2014년 1학기

Professor Seung-Hoon Choi

Part2. jQuery Ch15. 문서 객체 조작

15 문서 객체 조작

문서 객체 조작– 자바스크립트만으로 문서 객체 모델을 다루려면 복잡함

– jQuery를 이용하면 쉽게 다룰 수 있다.

– 이 책에서 가장 중요한 부분

15.1 문서 객체의 클래스 속성 추가

addClass(클래스_속성_값) / addClass(함수)– 문서 객체에 class 속성을 추가하는 메소드

코드 15-1, 15-2– $('h1').addClass('item');

<h1> 태그에 class = ‘item’ 속성을 추가함

코드 15-3– addClass( )의 인자로 함수를 전달하여 class 속성을 지정함

– $('h1').addClass(function (index) {

return 'class' + index;

});

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

removeClass(클래스_속성_값)– 해당 class 속성을 제거하는 메소드

코드 15-4, 15-5– $('h1').removeClass('select');

속성 값이 ‘select’인 클래스 속성을 제거함

removeClass( )– 매개변수에 아무것도 입력하지 않으면, 문서 객체의 모든 클래

스 속성을 제거함

15.3 문서 객체의 속성 검사

attr( ) – 문서 객체의 속성과 관련된 모든 기능을 제공하는 메소드

코드 15-6, 15-7– var src = $('img').attr('src');

<img> 태그 중 ‘src’ 속성의 값을 src 변수에 담는다.

첫 번째 발견한 <img> 태그를 선택한다.– (주의) jQuery에서 값을 얻어오는 메소드의 경우는 일반적으로 첫 번

째 선택된 문서 객체에 대해서만 동작한다.

15.4 문서 객체의 속성 추가

문서 객체에 속성을 추가할 때에도 attr( ) 메소드를 사용함

세 가지 형태– (1) $(selector).attr(name, value);

– (2) $(selector).attr(name, function(index, attr){ }); 속성의 값이 함수에 의한 결정됨

– (3) $(selector).attr(object); 인자 object: 속성 이름과 값 쌍들로 이루어진 객체

15.4 문서 객체의 속성 추가

(1)번 형태– 코드 15-9

$(‘img’).attr(‘width’, 200);– 모든 <img> 태그에 width=“200” 속성을 추가함

15.4 문서 객체의 속성 추가

(2)번 형태– 코드 15-10

$('img').attr('width', function (index) {

return (index + 1) * 100;

});

=> 첫 번째 <img> 태그의 width 속성 값은 100

=> 두 번째 <img> 태그의 width 속성 값은 200

=> 세 번째 <img> 태그의 width 속성 값은 300

… …

15.4 문서 객체의 속성 추가

(3)번 형태– 코드 15-11

$('img').attr({

width: function (index) { return (index + 1) * 100; },

height: 100});

=> width 속성과 height 속성을 <img> 태그에 추가함

15.5 문서 객체의 속성 제거

removeAttr(name)– 문서 객체의 속성을 제거하는 메소드

코드 15-12, 15-13– $('h1').removeAttr('data-index');

모든 <h1> 태그의 ‘data-index’ 속성을 제거함

15.6 문서 객체의 스타일 검사

css( )– 스타일과 관련된 모든 기능을 수행하는 메소드

코드 15-14, 15-15– var color = $('h1').css('color');

첫 번째 <h1> 태그의 color 스타일 속성의 값을 얻어옴

– background-color 스타일 속성의 경우 아래 둘 다 가능함 (1) css(‘background-color’)

(2) css(‘backgroundColor’)

15.7 문서 객체의 스타일 추가

문서 객체에 스타일을 추가하는 3가지 형태– (1) $(selector).css(name, value);

– (2) $(selector).css(name, function(index, currentValue) { }); 함수를 이용해서 스타일 속성의 값을 결정함

– index: 선택된 태그의 인덱스

– currentValue: 현재 선택된 태그의 name 스타일 속성의 값

– (3) $(selector).css(object) object: 스타일 속성과 값의 쌍들로 이루어진 객체

15.7 문서 객체의 스타일 추가

(1)번 형태– 코드 15-17

$('h1').css('color', 'red');

15.7 문서 객체의 스타일 추가

(2)번 형태– 코드 15-18

var color = ['red', 'white', 'purple'];

// 문서 객체의 스타일을 변경합니다.

$('h1').css('color', function (index) {

return color[index];

});

=> 함수가 ‘color’ 스타일 속성의 값을 결정함

15.7 문서 객체의 스타일 추가

(3)번 형태– 코드 15-9

var color = ['red', 'white', 'purple'];

// 문서 객체의 스타일을 변경합니다.

$('h1').css( {

color: function (index) {

return color[index]; },

backgroundColor: ‘black’

} );

=> ‘color’와 ‘background-color’ 스타일 속성의 값을 설정함

15.8 문서 객체의 내부 검사

문서 객체의 내부를 검사하는 메소드– html()

문서 객체의 내부 글자와 관련된 모든 기능을 수행함

HTML 태그를 인식해서 가져옴

문서 객체의 innerHTML와 관련 있음

– text() 문서 객체의 내부 글과와 관련된 모든 기능을 수행함

HTML 태그를 무시하고 스트링(텍스트)만 가져옴

HTML 태그문서 객체의 textContent와 관련 있음

15.8 문서 객체의 내부 검사

코드 15-21– var html = $('h1').html();

첫 번째 <h1> 태그의 내부 내용물을 가져옴

HTML 태그가 포함되어 있다면 이를 인식하여 HTML 태그도 가져옴

코드 15-22– var text = $('h1').text();

모든 <h1> 태그의 내부 텍스트를 가져옴

HTML 태그가 있다면 무시하고 텍스트만 가져옴

15.9 문서 객체의 내부 추가

문서 객체의 내부 내용물 추가 방법– (1) $(selector).html(value) / $(selector).text(value);

– (2) $(selector).html(function(index, currentHtml) { });

$(selector).text(function(index, currentText) { });

15.9 문서 객체의 내부 추가

코드 15-23, 15-24– $('div').html('<h1>$().html() Method</h1>');

모든 <div> 태그에 내부 내용물을 설정함

<h1> 태그를 인식하여, <h1> 태그를 생성하여 DOM 트리의<div> 아래에 붙인 후 그 아래에 ‘$().html() Method’를 가지는 텍스트 노드를 붙인다.

코드 15-25– $(‘div’).text(‘<h1>$().html() Method</h1>’);

<h1>을 태그로 인식하지 않고, 텍스트로 인식하여 전체가 텍스트 노드로서 <div> 태그의 내부 내용물이 된다.

15.9 문서 객체의 내부 추가

코드 15-26– $('div').html(function (index) {

return '<h1>Header-' + index + '</h1>'; });

=> 함수를 이용해서 내부 내용물을 결정함

코드 15-27, 15-28– $('h1').html(function (index, html) {

return '★' + html + '★';

});

=> 모든 <h1> 태그의 현재 내용물 양쪽에 별표를 붙여서

다시 <h1> 태그의 내용물로 설정함

15.10 문서 객체 제거

문서 객체 제거 메소드– remove()

선택된 문서 객체를 제거함

– empty() 선택된 문서 객체의 내부에 들어있는 모든 문서 객체를 제거함

코드 15-29, 15-30– $('h1').first().remove();

첫 번째 <h1> 태그를 제거함

코드 15-31– $('div').empty();

<div> 태그 내부의 모든 문서 객체가 제거됨

15.11 문서 객체 생성(1)

문서 객체의 2 종류– (1) 텍스트 노드를 갖는 문서 객체

– (2) 텍스트 노드를 갖지 않는 문서 객체

문서 객체 생성– $( ) 메소드를 이용함

15.11 문서 객체 생성(1)

코드 15-32, 15-33– $('<h1></h1>');

<h1> 문서 객체 생성

코드 15-34– $('<h1></h1>').html('Hello World .. !');

<h1> 태그 내부에 텍스트 노드 생성

코드 15-35– $('<h1></h1>').html('Hello World .. !').appendTo('body');

<h1> 태그 내부에 텍스트 노드를 생성하여, <body> 태그에 붙임

15.11 문서 객체 생성(1)

코드 15-36– $('<h1>Hello World .. !</h1>').appendTo('body');

$( ) 안에, 텍스트 내용을 직접 넣을 수도 있다.

15.12 문서 객체 생성(2)

텍스트 노드를 갖지 않는 문서 객체 생성– $( )와 attr( ) 메소드 이용

코드 15-37– $(‘img’): img 태그 선택– $('<img />').attr('src', 'Chrysanthemum.jpg').appendTo('body');

<img> 태그를 생성하고, src 속성을 지정한 후

<body> 태그에 붙임

코드 15-38– $('<img />', { src: 'Chrysanthemum.jpg', width: 350,

height:250 }).appendTo('body'); }); $( ) 메소드의 두 번째 인자로 속성을 지정하는 객체를 넣어줌

15.13 문서 객체 삽입(1)

선택된 문서 객체 A를 인자로 들어온 문서 객체 B에 삽입하는 메소드– $(A).appendTo(B)

A를 B의 내부의 뒤 부분에 추가함(A가 B의 자식이 됨)

– $(A).prependTo(B) A를 B의 내부의 앞 부분에 추가함 (A가 B의 자식이 됨)

– $(A).insertAfter(B) A를 B 뒤에 추가함 (A가 B의 형제가 됨)

– $(A).insertBefore(B) A를 B의 앞에 추가함 (A가 B의 형제가 됨)

15.14 문서 객체 삽입(2)

선택된 문서 객체 A에 인자로 들어온 문서 객체 B를 삽입하는 메소드– $(A).append(B)

B를 A의 내부의 뒤 부분에 추가함 (B가 A의 자식이 됨)

– $(A).prepend(B) B를 A의 내부의 앞 부분에 추가함 (B가 A의 자식이 됨)

– $(A).after(B) B를 A의 뒤에 추가함 (B가 A의 형제가 됨)

– $(A).before(B) B를 A의 앞에 추가함 (B가 A의 형제가 됨)

15.14 문서 객체 삽입(2)

append( ) 메소드 사용 방법– (1) $(selector).append(content, content, …, content);

content: 문자열, 또는 문서 객체가 들어갈 수 있음

선택된 문서 객체 내부의 뒤 부분에, content 들을 추가함

예– $(‘div’).append(‘h1’); // 모든<div> 뒤 부분에 ‘h1’ 텍스트 노드 추가

– $(‘div’).append(‘<h1>’); // 모든 <div> 뒤 부분에 <h1> 태그 추가

– $(‘div’).append(‘<h1>csh</h1>’); // 모든 <div> 뒤 부분에 태그 + 텍스트 노드 추가

– (2) $(selector).append(function(index) { … }); 함수를 이용하여 추가할 문서 객체를 생성함

15.14 문서 객체 삽입(2)

코드 15-39, 15-40– $('body').append(h1, h2, h1, h2);

<body> 태그 내부의 뒷 부분에 변수 h1과 h2에 담긴 내용을 추가함

코드 15-41, 15-42, 15-43– 코드 연구

15.15 문서 객체 이동

문서 객체 이동 방법– 기존의 문서 객체를 선택한 후,

– 문서 객체 삽입 메소드를 사용함

코드 15-44, 15-45– $(‘<img />’).appendTo(‘body’); // 생성해서 붙임

– $('img').first().appendTo('body'); 첫 번째 <img> 태그를 선택하여,

<body> 태그 내의 뒤 부분으로 옮긴다.

코드 15-46– 이미지 크기 조정 후

– 1초에 한 번씩 첫 번째 이미지를 뒤로 옮김(setInterval( ) 이용)

15.16 문서 객체 복제

코드 15-47– $('div').append($('h1'));

모든 기존의 <h1> 태그를 선택하여

<div> 태그 내부 뒤 부분으로 이동시켜라

문서 객체 복제 메소드– clone( )

문서 객체를 복제함

15.16 문서 객체 복제

clone( ) 메소드 형태– (1) $(selector).clone( )

– (2) $(selector).clone(Boolean dataAndEvents) 이벤트 핸들러도 복제될 지 말지 지정함

코드 15-48– $('div').append($('h1').clone());

모든 <h1> 태그들을 복제하여, <div> 태그 뒤 부분에 추가함