Chapter 03. 노드 다루기 - 노드 찾기. Lesson 02. 찾은 노드 다루기

Chapter 03. 노드 다루기 - 노드 찾기.

Lesson 02. 찾은 노드 다루기

- 핵심 01 : 찾은 노드의 개수 구하기

- 핵심 02 : 찾은 노드 중 n번째 노드 접근하기

- 핵심 03 : 자바스크립트 DOM 객체 접근하기

- 핵심 04 : 순차적으로 찾은 노드 접근하기

- 핵심 05 : 찾은 노드 중에서 특정 노드만 찾기

- 핵심 06 : 찾은 노드의 자손 노드 중 특정 노드만 찾기

- 핵심 07 : 인덱스 값 구하기

- 핵심 01 : 찾은 노드의 개수 구하기

사용법 : $대상.length

length 프로퍼티를 이용하면 jQuery 객체 내부에 들어 있는 노드 개수를 구할 수 있습니다.

예제 01. 문서에서 div 태그 노드가 몇 개 인지 출력해 주세요.

$(document).ready(function()
{
    alert("length = "+$("div").length); // alert는 화면에 출력
});

$(document).ready(function()
{
    $("ul.menu li").each(function(index)
    {
        concole.log(this);
    });
});

$(this)가 실행되면 이 DOM 객체를 포장하고 있는 새로운 jQuery 객체가 생성됩니다.

예제 06. 메뉴 노트(ul.menu li)의 border 속성을 다음 표와 같이 2배수로 점점 두껍게 만들어 주세요.

풀이 01 : $(this)를 사용한 경우

$(document).ready(function()
{
    var $liList = $("ul.menu li");
    $liList.each(function(index)
    {
        var bordperpx = (index+1)*2;
        $(this).css("border", borderpx+"px solid #f00");
    })
});

자바스크립트 DOM에는 css()라는 기능이 없기 때문에 $() 함수를 이용해서 

일반 자바스크립트 DOM 객체를 감싼 jQuery의 인스턴스로 만들어 css() 메서드를 사용하는 것입니다.

일종의 형변환이라고 생각해도 좋습니다.

jQuery를 사용하지 않고, 자바스크립트 DOM 기능을 이용하는 방법.

$(document).ready(function()
{
    $("ul.menu li").each(function(index)
    {
        var bordperpx = (index+1)*2;
        this.style.border = borderpx+"px solid #f00";
    })
});

풀이 02 : eq() 메서드를 사용한 경우

$(document).ready(function()
{
    var $liList = $("ul.menu li");
    $liList.each(function(index)
    {
        var bordperpx = (index+1)*2;
        $liList.eq(index).css("border", borderpx+"px solid #f00");
    })
});

- 핵심 05 : 찾은 노드 중에서 특정 노드만 찾기

사용법 : $대상.fliter("선택자")

찾은 노드 중에서 특정 노드만을 걸러(fliter)내고 싶을 때 fliter() 메서드를 사용합니다.

filter() 메서드가 찾는 대상은 오직 현재 찾은 노드이며, 

현재 찾은 노드의 자식 또는 자손 그리고 부모 노드는 모두 관련이 없습니다.

예제 07. 풀이 전 코드에서 $liList 변수로 들어 있는 메뉴 항목 중 select 클래스가 적용된 노드를 찾아 border를 "4px solid #f00"으로 변경하세요.

$(document).ready(function()
{
    var $liList = $("ul.menu li");
    $liList.fliter(".select").css("border", "4px solid #f00");
});

- 핵심 06 : 찾은 노드의 자손 노드 중 특정 노드만 찾기

사용법 : $대상.find("선택자")

찾은 노드의 자식(자손포함) 노드 중에서 특정 노드를 찾고 싶을때 find() 메서드를 사용합니다.

주의해야 할 점은 

find() 메서드는 현재 노드가 아닌 현재 노드의 자식을 포함한 자손 노드를 검색한다는 것 입니다.

오직 바로 아래 자식 노드에서 특정 노드를 찾고 싶은 경우는 children() 메서드를 사용합니다.

* filter() 메서드와 find() 메서드 차이점

filter() 메서드는 현재 노드 중에서 특정 노드를 걸러내고(filter) 싶을 때 사용. 검색 대상에서는 자식 및 자손노드는 제외

find() 메서드는 현재 노드의 자손 노드 중에서 특정 노드를 찾고(find) 싶을 때 사용. 검색 대상에서 현재 노드는 제외

예제 08. 아래에 등장하는 풀이 전 코드를 보면 $content에는 #content 노드를 감싸고 있는 jQuery 객체가 있습니다.

이 객체를 사용해 #content 노드의 자손(자식 포함) 노드 중 test1 클래스가 적용된 노드를 찾아 border를 "4px solid #f00"으로 변경하세요.

$(document).ready(function()
{
    var $content = $("#content");
    $content.find(".test1").css("border","4px solid #f00");
});

- 핵심 07 : 인덱스 값 구하기

사용법 : 

$대상.index()

$목록.index($대상)

$목록.index(대상DOM)

index() 메서드를 이용하면 노드가 위치한 인덱스 값을 알 수 있습니다.

예제 09. 풀이 전 코드를 보면 메뉴 항목(ul.menu li)에 클릭 이벤트를 등록해 놓은 상태입니다.

클릭한 노드가 몇 번째 노드인지 index 값을 출력해 주세요.

$(document).ready(function()
{
    $("ul.menu li").click(function()
    {
        alert($(this).index());
    })
});