jQuery (제이쿼리) - jQuery 자식(하위 엘리먼트) 노드 선택하기 (셀렉터 >)

제이쿼리에서 자식 노드(하위요소, 하위 엘리먼트)를 선택할 때는 아래의 두 가지 방법이 많이 사용 된다.

    첫번째 노드입니다.


    

        두번째 노드입니다.
    


$(document).ready(function() {
	var count1 = $("div font").length;
    var count2 = $("div > font").length;
    
    alert("첫번째 셀렉터의 값 : " + count1 + "\n" + "두번째 셀렉터의 값 : " + count2);
});

이 외에도 많은 방법이 있을 수도 있지만 우선은 위에 작성한 방법만 알아두고 넘어가자.

위의 소스를 실행하게 되면 count1 은 2 의 결과값을 리턴하고 count2 는 1 의 결과값을 리턴하게 되는데

그 이유는 셀렉터를 사용해 노드를 선택할 때 > 를 사용하게 되면 직접적인 하위요소만을 선택하기 때문이다.

첫번째 노드는 div 태그 밑에 바로 font 태그가 존재하기 때문에 직접적인 하위요소가 되어 선택이 되었고

두번째 노드는 div 태그와 font 태그 사이에 p 태그가 존재하기 때문에 직접적인 하위요소가 아니게 되어 선택이 되지 않았다.

위의 셀렉터 또한 여러가지 방법으로 사용이 가능하다.

    첫번째 노드입니다.


    

        두번째 노드입니다.
    


$(document).ready(function() {
	alert(  $("div font[color=red]").html()  );
	alert(  $("div p font").html()  );
	alert(  $("p font").html()  );
    alert(  $("#pTag font").html()  );
});

뭐 정해진 답은 없다. 본인이 원하는 노드만 제대로 선택할 수 있다면 그걸로 OK.