본문 바로가기
프로그래밍_기타 언어

jquery 노드 메서드 정리

by 떠도리c 2024. 9. 22.
반응형

노드 메서드

노드를 선택하거나, 찾아가는 방법(체인기능)의 메서드 입니다.

분류 핵심 내용 핵심 프로퍼티 및 메서드
일반 노드찾기 아이디 이름으로 노드 찾기 $("아이디 이름")
태그 이름으로 노드 찾기 $("태그 이름")  
클래스 이름으로 노드 찾기 $("클래스 이름")  
속성으로 노드 찾기 $("[속성이름=값]")  
찾은 노드다루기 찾은 개수 구하기 $대상.length
n번째 노드 접근하기 $대상.eq(index)  
자바스크립트 DOM 객체 접근하기 $대상.get(index)$대상[index]  
순차적으로 노드 접근하기 $대상.each(function(index){ $(this) 또는 $대상.eq(index); });  
찾은 노드 중에서 특정 노드만 찾기 $대상.filter("선택자")  
찾은 노드의 자손 노드 중 특정 노드만 찾기 $대상.find("선택자")  
인덱스 값 구하기 $대상.index()$목록.index($대상)$목록.index(대상 DOM 객체)  
자식 노드찾기 모든 자식 노드 찾기 $대상.children()
특정 자식 노드만 찾기 $대상.children("선택자")  
첫 번째 자식 노드 찾기 $대상.children().first()$대상.children(":first")$대상.children().eq(0)$대상.children("eq(0)")  
마지막 번째 자식 노드 찾기 $대상.children().last()$대상.children(":last")$대상.children().eq($대상.children().length-1)$대상.children(":eq("+($대상.children().length-1)+")")  
n번째 자식 노드 찾기 $대상.children().eq(index)$대상.children(":eq("+index+")")  
부모 노드찾기 부모 노드 찾기 $대상.parent()
조상 노드 찾기 $대상.parents(["선택자"])  
형제 노드찾기 이전 형제 노드 찾기 $대상.prev()$대상.prevAll(["선택자"])
다음 형제 노드 찾기 $대상.next()$대상.nextAll(["선택자"])  
노드 생성/추가 노드 생성 $("추가노드 DOM 문자열")
첫 번째 자식 노드로 추가 $부모노드.prepend($추가노드)$추가노드.prependTo($부모노드)  
마지막 번째 자식 노드로 추가 $부모노드.append($추가노드)$추가노드.appendTo($부모노드)  
특정 노드의 이전 위치에 추가 $기준노드.before($추가노드)$추가노드.insertBefore($기준노드)  
특정 노드의 다음 위치에 추가 $기준노드.after($추가노드)$추가노드.insertAfter($기준노드)  
노드제거 특정 노드 제거 $대상.remove()
모든 자식 노드 제거 $대상.children().remove()  
노드 내용읽기 및 변경 노드 내용을 문자열로 읽기 $대상.html() //태그 내용 포함$대상.text() //태그 내용 제외
노드 내용 수정하기 $대상.html("수정할 태그 문자열")$대상.text("수정할 텍스")  
노드 내용을 이용해 여러 개의 자식 노드 추가하 $대상.html("추가할 태그 문자열")  
노드 내용을 이용해 모든 자식 노드 제거하기 $대상.html("")  

 

반응형