javascript
childNodes
- 자식 노드를 찾을 때 사용, 모든 자식을 찾을 때에는 childNodes를 사용하며 배열 형태로 저장 됨
- element.childNodes;
: 모든 자식노드
: 이 경우 주석(Comment)이나, 요소 앞뒤에 있는 공백(text)이 자식노드로 함께 포함이 됨
: .nodeName 속성을 통해 요소 종류 확인 가능
- element.children;
: 해당 HTML 요소의 자식요소를 배열의 형태로 반환
: childNodes와는 다르게 주석이나 줄바꿈 또는 텍스트는 제외
- element.firstChild;
: 첫번째 자식노드
- element.lastChild;
: 마지막 자식노드
- element.childNodes[i]
: 특정 순서의 자식 노드
parentNode
- 부모 노드를 찾을 때 사용
- element.parentNode;
: 해당 노드의 부모노드
- element.parentNode.parentNode;
: 해당 노드의 조상노드
Sibling
- 형제 노드 찾을 때 사용
- 자바스크립트에서는 해당 노드의 앞, 뒤 형제만 찾을 수 있다.
: 특정 형제노드를 찾으려면 제이쿼리 사용해야 함
- element.previousSibling;
: 해당 노드의 앞 형제노드
- element.nextSibling;
: 해당 노드의 뒤 형제노드
jQuery
children([선택자])
- $(e).children();
: 자식 검색,
- $(e).children.(선택자)
: 특정 자식노드 찾기
- 텍스트노드를 반환하지 않음
: 텍스트 및 주석 노드를 포함한 모든 자식을 얻으려면
=> .children().find().children().contents()
- 첫번째 자식노드
: $(e).children().first();
: $(e).children().eq(0);
: $(e).children(":first");
: $(e).children(":eq(0)");
- 마지막 자식노드
: $(e).children().last();
: $(e).children(":last");
: $(e).children().eq($(e).children.length-1);
: $(e).children(":eq("+($(e).children().length-1)+")");
: $(e).children().eq(-1);
: $(e).children(":eq(-1)");
- n번째 자식노드
: $(e).children().eq(index);
: $(e).children(":eq("+index+)");
parent(), parents([선택자])
- $(e).parent();
: 부모노드 찾기
- $(e).parents();
: 조상노드 찾기
- $(e).parents(선택자);
: 특정 조상노드 찾기
prev(), prevAll([선택자]), next(), nextAll([선택자]), siblings(선택자)
- $(e).prev();
: 특정 노드의 이전 형제노드 찾기
- $(e).prevAll();
: 특정 노드의 모든 이전 형제노드 찾기
- $(e).prevAll(선택자);
: 이전 형제노드 중 특정 노드 찾기
- $(e).next();
: 특정 노드의 다음 형제노드 찾기
- $(e).nextAll();
: 특정 노드의 모든 다음 형제노드 찾기
- $(e).nextAll(선택자);
: 다음 형제노드 중 특정 노드 찾기
- $(e).siblings(선택자);
: 특정 형제노드 찾기
filter([선택자]), find([선택자]), eq(index)
- 요소 필터링, 자손노드찾기
- $(e).filter(선택자);
: 찾은 노드 중에서 특정 노드만 필터링
- $(e).find(선택자);
: 현재 노드의 자손노드 중 특정 노드 찾기
- $(e).eq(index)
: index 번호에 해당하는 요소 찾기