DOM 구조는 실제로 트리 구조입니다. jQuery에서 제공하는 트리 선택기를 사용하여 DOM 트리에서 노드를 선택할 수 있습니다. 이러한 트리 선택기의 메서드에는 children(), parent(), parent(), next(), prev(), siblings()가 포함됩니다.
요소의 "자식" 선택 - children()
>< ;li id="son1">첫 번째 열
- 두 번째 열
- 세 번째 열
$("#parent").children().length //모든 "자식" 수 가져오기(li), "3 ”
$("#parent").children("#son1").text(); //첫 번째 "자식"(li) 값 가져오기 - "첫 번째 열"
선택 요소의 "상위" - parent()
$("#son1").parent().attr ("id");/ /ul의 ID 가져오기 - "parent"
특정 요소의 "조상" 선택 -parents() (참고:
$("#son2 ").parents() .each(function(i){
if(ialert($(this).html());
})
요소의 "동생" 선택 - next()
첫 번째 열
세 번째 열
$("#son2" ).next().text (); //요소의 "형제"를 선택하려면 #son3을 선택하세요.
prev()
코드 복사
두 번째 열 세 번째 열
< ;/ul> ("#son2").prev().text(); //요소의 "brothers"를 선택하려면 #son1을 선택하세요.
siblings()
코드 복사
코드는 다음과 같습니다. < ;li id= "son1">첫 번째 열 두 번째 열 세 번째 열
$("#son2").siblings().text() //#son1 및 #son3 선택
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
