javascript & jQuery 노드 찾기

장유라·2022년 3월 17일
0

javascript & jQuery

목록 보기
2/3

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 번호에 해당하는 요소 찾기

0개의 댓글