문서 객체 조작

jQuery 기본 셀렉터
예제 설명
addClass() 문서 객체의 클래스 속성을 추가합니다.
removeClass() 문서 객체의 클래스 속성을 제거합니다.
attr() 속성과 관련된 모든 기능을 수행합니다.
removeAttr() 문서 객체의 속성을 제거합니다.
css() 스타일과 관련된 모든 기능을 수행합니다.
html() 문서 객체 내부의 글자와 관련된 모든 기능을 수행합니다.(HTML 태그 인식)
text() 문서 객체 내부의 글자와 관련된 모든 기능을 수행합니다.
remove() 특정 문서 객체를 제거합니다.
empty() 특정 문서 객체의 후손을 모두 제거합니다.
$() 문서 객체를 생성합니다.
$(A).appendTo(B) A를 B의 뒤 부분에 추가합니다.(B의 자식 element로)
$(A).prependTo(B) A를 B의 앞 부분에 추가합니다.(B의 자식 element로)
$(A).insertAfter(B) A를 B의 뒤에 추가합니다.
$(A).insertBefore(B) A를 B의 앞에 추가합니다.
$(A).append(B) B를 A의 뒷 부분에 추가합니다.(A의 자식 element로)
$(A).prepend(B) B를 A의 앞 부분에 추가합니다.(A의 자식 element로)
$(A).after(B) B를 A의 뒤에 추가합니다.
$(A).before(B) B를 A의 앞에 추가합니다.
clone() 문서 객체를 복제합니다.
wrap() 태그를 다른 태그로 묶습니다.
wrapAll() 태그 전체를 모아서 다른 태그로 묶습니다.
wrapInner() 자식태그/텍스트를 다른 태그로 묶습니다.
replaceWith() 태그를 다른 태그로 변경합니다. 내부 text도 변경
  1. 문서객체의 클래스 속성 추가
  2. 문서객체의 클래스 속성 제거
  3. 문서객체의 속성 검사
  4. 문서객체의 속성 추가
  5. 문서객체의 속성 제거
  6. 문서객체의 스타일 검사
  7. 문서객체의 스타일 추가
  8. 문서객체의 내부 검사
  9. 문서객체의 내부 추가
  10. 문서객체의 삭제



1.문서객체의 클래스 속성 추가 - addClass()

css()

여러 엘리먼트를 선택한 수 css 프로퍼티를 얻고자 할 수도 있다. 그러나 이것은 좋은 생각이 아니다. 함수는 하나의 결과만을 반환하기 때문이다. 그러므로 선택된 엘리머트 중 첫번째로 선택된 엘리먼트의 프로퍼티만을 얻게 될것이다.

css()를 이용해서 css 프로퍼티를 얻어 올때 유용한 점은 jQuery에서 엘리먼트의 실제 스타일 정보를 반환한다는 것이다. 이것은 css 정의에서 지정한 값이 아니라 사용자의 브라우저에서 보여지는 값이 반환된다는 사실을 의미한다. 그러므로 css 파일에서 div의 높이를 200픽셀로 지정했다고 해도 div내의 내용으로 인해 높이가 200픽셀을 넘어가면 jQuery에서는 css파일에서 지정한 200픽셀이 아니라 엘리먼트의 실제 높이를 반환한다.

html() / text()

html() 메서드는 HTML 태그를 인식하고, text() 메서드는 HTML 태그를 인식하지 않는다는 점이 차이가 있습니다.
html() 메서드를 이용하면 첫번째 문서 객체의 내용을 출력하지만, text() 메서드의 경우에는 선택자로 선택한 모든 문서 객체의 글자를 이어서 출력합니다. html() Getter / text() Getter 버튼을 눌러 확인해 봅시다.

html() 메서드의 매개변수로 함수를 입력할 때는 index를 매개 변수로 넣습니다(인자명은 다른 문자로 대체 가능합니다.순서가 중요할 뿐입니다). html() 메서드의 매개 변수로 입력하는 함수는 두 번째 매개 변수로 원래 있던 HTML 내용을 얻어 올 수 있습니다. 물론, 지금까지 살펴본 메서드에도 이러한 기능이 있지만 잘 사용하지 않으므로 넘어갔습니다. html() 메서드의 매개 변수로 입력한 함수의 두 번째 매개 변수는 자주 사용하므로 살펴봅시다.
html() 메서드의 매개변수로 입력한 함수의 매개 변수를 두 개 사용하면 두 번째 매개 변수에 원래 있던 HTML내용(oldhtml)이 들어갑니다. text()에서도 마찬가지 방법으로 사용합니다.

remove()

jQuery의 remove() 메서드를 사용할 경우에는 다음의 두가지 사항을 지켜야만 합니다.

  • ※ 선택된 요소가 remove() 메서드를 사용하여 DOM에서 제거된다 하더라도 jQuery 래퍼집합에서 제거되지는 않습니다. 이는 이론상 제거된 요소들을 계속해서 조작할 수 있다는 것을 의미하며, 원한다면 다시 DOM에 그 요소들을 추가할 수 있다는 것을 의미합니다.
  • ※ 이 메서드는 DOM에서 요소를 제거할 뿐만 아니라 그 요소가 내부적으로 가지고 있을지도 모르는 캐시 데이터 및 모든 이벤트 처리기까지 제거할 것입니다.


attr()

문서에 여러 개의 대상 요소가 존재한다면(예를 들어 다수의 a link 같이) attr() 메서드는 처음으로 일치하는 요소에 대해 동작할 것입니다. attr()로 다수의 대상 요소에 어트리뷰트를 설정할 경우에는 모두 다 설정이 가능합니다. attr() 메서드를 값을 가져올 때 래퍼집합(wrapperset)을 each() 메서드로 순회하면서 this 키워드를 사용해서 각각을 읽어 올 수 있습니다.
대부분의 요소가 한 개 이상의 어트리뷰트를 가지고 있으므로 단일 attr() 메서드를 사용하여 여러 개의 어트리뷰트 값을 설정하는 것도 가능합니다. 예를 들면, attr() 메서드에 두 개의 문자열 매개변수를 전달하는 대신 자바스크립트 객체형식를 전달하여 아래와 같이 설정할 수 있습니다.

						jQuery('a').attr({'href':'http://www.jquery.com','title':'jquery.com'}).attr('href'); 
					


** jQuery Tip - 따옴표 사용 **

일반적으로 자바스크립트 객체를 작성할 때 키를 따옴표로 감싸는 것은 불필요한 일이다. 그러나 jQuery가 정상적으로 동작하려면 하이픈이 있는 키(예를 들어 background-color나 font-size)라고 해도 따옴표를 붙여야 한다. 그렇지 않다면 낙타표기법(backgroundColor)를 써야한다.
추가로 자바스크립트에서 예약어로 사용되는 경우(float이나 class 같은 경우)에도 반드시 따옴표를 붙여야 한다.
키에 따라 따옴표를 붙이거나 붙이지 않는지를 기억하는 것은 혼란스러울 수 있으므로 항상 모든 키에 따옴표를 분이는 것을 추천한다.

							$(function() {
								backgroundColor: "#ddd",
								'backround-color' : '#ddd'
							});	
						


감싸려는 대상1 감싸려는 대상2 감싸려는 대상3 감싸려는 대상4