Development/Javascript
[jQuery] 제이쿼리 :: (2) 문서 객체 조작(DOM Control)
레오나르도 다빈츠
2021. 12. 8. 14:40
◽ 문서 객체 조작(DOM Control)
1) 탐색 선택자: 정확한 요소를 선택하는 방법
| 선택자 | 설명 |
| $("ul li:odd") | <ul>의 <li> 요소 중 홀수 인덱스 요소만 선택 |
| $("ul li:even") | <ul>의 <li> 요소 중 짝수 인덱스 요소만 선택 |
| $("ul li:first") | <ul>의 <li> 요소 중 첫번째 요소 선택 |
| $("ul li:last") | <ul>의 <li> 요소 중 마지막 요소 선택 |
| $("ul li:eq(1)"), $("ul li").eq(1) | <ul>의 <li> 요소 중 두번째 요소만 선택 |
| $("ul li:it(2)") | <ul>의 <li> 요소 중 세번째 이전 요소만 선택 |
| $("ul li:gt(2)") | <ul>의 <li> 요소 중 세번째 이후 요소만 선택 |
| $("ul li:nth-child(2n)") | <ul>의 <li> 요소 중 2의 배수 번째 요소만 선택 |
| $("ul li:contains('문자')") | <ul>의 <li> 요소 중 "문자"가 포함된 요소만 선택 |
| $("ul li:has('span')") | <ul>의 <li> 요소 중 <span> 태그가 포함된 요소만 선택 |
| $("ul li").filter(".theObj") | <ul>의 <li> 요소 중 class가 "theObj"인 요소만 선택 |
| $("ul li").find("a") | <ul>의 <li> 요소가 포함하는 <a> 요소만 선택 |
| $("ul li:visible") | <ul>의 <li> 요소 중 보이는 요소만 선택 |
| $("ul li:hidden") | <ul>의 <li> 요소 중 숨겨진 요소만 선택 |
| $("h1, h2") | h1, h2 요소 선택 |
| $("ul li").not(:empty) | <ul>의 <li> 요소 중 내용을 가진 요소만 선택 |
2) 문서 객체 조작 메서드: 문서 객체의 생성, 복제, 추가, 삭제 및 속성에 대한 변경, 삭제할 때 사용
| 선택자 | 설명 |
| $("선택 요소").html() | 선택한 요소의 하위 요소들을 반환 |
| $("선택 요소").html("새 요소") | 선택한 요소의 하위 요소들을 새 요소들로 변경 |
| $("선택 요소").text("새 텍스트") | 선택한 요소의 텍스트를 "새 텍스트"로 변경 |
| $("새 요소") | 새 요소 생성 |
| $("선택 요소").append("새 요소") | 선택 요소의 마지막 자식요소로 새 요소를 추가 |
| $("선택 요소").prepend("새 요소") | 선택 요소의 첫 자식요소로 새 요소를 추가 |
| $("새 요소").appendTo("요소 선택") | 선택 요소의 마지막 자식요소로 새 요소를 추가 |
| $("새 요소").prependTo("요소 선택") | 선택 요소의 첫 자식요소로 새 요소를 추가 |
| $("새 요소").insertBefore(요소선택) | 선택 요소 이전 위치에 형제요소로 새 요소를 추가 |
| $("새 요소").insertAfter(요소선택) | 선택 요소 다음 위치에 형제요소로 새 요소를 추가 |
| $("선택 요소").clone(true / false) | 선택 요소를 복제 (true: 하위 요소 포함 복제) |
| $("선택 요소").remove() | 선택 요소 삭제 |
| $("선택 요소").empty() | 선택 요소의 하위 요소들 모두 삭제 |
| $("선택 요소").attr("속성") | 선택 요소의 특정 속성을 지정 |
| $("선택 요소").attr("속성", "값") | 선택 요소의 특정 속성을 새 값으로 변경 |
| $("선택 요소").addClass("클래스명") | 선택요소에 클래스명 부여 |
| $("선택 요소").removeClass("클래스명") | 선택요소에 지정된 클래스명 삭제 |
| $("선택 요소").toggleClass("클래스명") | 선택요소에 클래스명이 없으면 추가, 있으면 삭제 |
| $("선택 요소").hasClass("클래스명") | 선택요소에 클래스명이 있으면 true 반환 |
| $("선택 요소").wrap("<div></div>") | 선택 요소를 <div> 요소로 둘러 쌈 |
| $("선택 요소").wrapAll("<div></div>") | 선택 요소들 전체를 <div> 요소로 둘러 쌈 |
출처
김광수, 조혜경, 정인용, 실전프로젝트 반응형 웹 퍼블리싱 (아이콕스, 2020)
개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.