본문으로 바로가기

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

첫번째 노드입니다.

두번째 노드입니다.

$(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.


댓글을 달아 주세요