jQuery 노드 다루기

jQuery 노드 다루기

jQuery에서 노드 찾기 기능은 매우 중요합니다. 스타일을 다룰 때도 대상 노드를 먼저 찾아야 하며, 이벤트를 추가하거나 삭제할 때도 적용할 대상 노드를 찾는 작업을 가장 먼저 하게 됩니다. 왜냐 하면 대부분의 작업이 노드를 찾고 난 후 다음 작업을 진행하기 때문입니다.

이번 노드 다루기는 수많은 노드 찾기 기능 중에서 실무를 진행하기 위해 반드시 알아야 하는 내용을 선별해놨습니다.

 

 

진행순서는 노드 찾기가 1순위 (가장 먼저 알아야 할 내용)

              나머지가 2순위 입니다(원하는 대로 진행 가능)

 

노드 찾기

노드 찾기의 핵심 내용

1	아이디 이름으로 노드 찾기  $(“#아이디 이름”)
2	태그 이름으로 노드 찾기    $(“태그 이름”)
3	클래스 이름으로 노드 찾기  $(“.클래스 이름”)
4	속성으로 노드 찾기         $(“속성 옵션”)

 

 

찾은 노드 다루기

찾은 노드란? jQuery 메서드를 활용해 구해 놓은 노드를 말합니다

var $divs = $(“div”); - 태그 이름으로 노드찾기

var $items = $(“.menu li”) – 클래스 이름으로 노드 찾기

$divs와 $items 에는 각각 선택자에 해당하는 노드가 담겨있을 것입니다.

I.       찾은 노드의 개수 구하기

$대상.length;

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

II.     찾은 노드 중 n번째 노드 접근하기

$대상.eq(index);

eq(index)를 통해 n번째에 해당하는 노드에 접근 가능합니다

III.    순차적으로 찾은 노드 접근하기

$대상.each(function(index){

   var $target = $대상.eq(index);

))

           $대상에 들어있는 노드를 좀더 쉽게 순차적으로 접근할 수 있습니다.

IV.    찾은 노드 중에서 특정 노드만 찾기

$대상.filter(“선택자”)

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

V.     인덱스 값 구하기

$대상.index()

$대상.index($대상)

$대상.index(대상DOM)

index 값 구하는 방법에는 3가지 종류가 있다.

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

 

VI.    자바스크립트 DOM 객체 접근하기

$대상.get(index)

jQuery는 만능이 아니기 때문에 지원하지 않는 기능도 가지고 있다 필요할 경우에는 자바스크립트DOM에 직접 접근해 사용해야 할때도 있기 때문에 알아두면 좋습니다.

 

자식 노드 다루기

children() vs contents()

$대상.children() – 특정 노드의 바로 하위에 위치한 모든 자식 노드를 찾고싶을 때 사용합니다. 쉽게 말해 자식 노드 중 오직 태그 노드만을 골라 찾아줍니다.

 

$(“#samplePage”).children()을 할 경우 div#header, div#content, div#footer노드를 구하게 됩니다.

$대상.contents() – 태그 노드는 물론 텍스트 노드 등의 모든 자식 노드를 자식 노드로 찾습니다

하지만 $대상.contents()의 경우 HTML엘리먼트 3개(div#header, div#content, div#footer), 텍스트 노드가 4개(샘플 페이지,””,””,””) 총 7개의 노드를 구하게 됩니다.

 

children() vs find()

 

첫 번째 그림의 스크립트의 내용은 id가 samplePage의 바로 하위 자식노드중에서 class가 test1이 적용된 노드를 찾아 border를 4px solid #f00으로 변경하는 문제입니다.

 

두번째 그림의 스크립트의 내용은 id가 samplePage의 자손 노드에서 class가 test1이 적용된 노드를 찾아 border를 4px solid #f00으로 변경하는 문제입니다

위의 실행 결과에서 알 수 있는 것처럼 find() 메서드는 바로 다음 하위 자식 노드에서만 찾는 것이 아닌 모든 노드에서 찾는 것이기 때문에 children() 메서드와 전혀 다른 결과값이 나타나게 됩니다.

 

노드 다루기 정리.

자식 노드 찾기	모든 자식 노드 찾기	$대상.children()
	특정 자식 노드만 찾기	$대상.children(“선택자”)
	첫 번째 자식 노드 찾기	$대상.children().first()
		$대상.children().eq(0)
		$대상.children(“:first”)
		$대상.children(“:eq(0)”)
	마지막 번째 자식 노드 찾기	$대상.children().last()
		$대상.children(“:last”).
		$대상.children().eq($대상.children().length-1)
		$대상.children(“:eq(“+$대상.children().length-1+”)”)
		$대상.children().eq(-1)
		$대상.children(“:eq(-1)”)
	n번째 자식 노드 찾기	$대상.children().eq(index)
		$대상.children(“:eq(”+index+”)”)

 

부모 노드 다루기

부모 노드란? 사용법 : $대상.parent()  .

-특정 노드를 감싸고 있는 바로 위의 상위 노드를 의미합니다.

 

01.부모 노드 찾기

 

예제01 – ul.menu 노드의 부모노드를 찾아 border 속성을 “4px solid #f00”으로 변경해 주세요.

ul.menu의 부모노드는 class=sample-content이므로 노드찾기의 border가 4px solid #f00로 변경됩니다.

 

02.조상 노드 찾기

조상 노드란? 사용법 : $대상.parents([“선택자”])  .

- 조상 노드는 특정 노드를 감싸고 있는 모든 노드를 의미합니다.

예제02 ul.menu 노드의 조상 노드 중 page 클래스가 적용된 노드를 찾아 border 속성을 “4px solid #f00”으로 변경해 주세요.

ul.menu노드의 조상 노드 중 page 클래스가 적용된 노드를 찾는것이기 때문에 page클래스가 적용된 samplePage의 border속성을 4px solid #f00으로 변경합니다.

 

ul.menu노드의 조상 노드 중 page 클래스가 적용된 노드를 찾는것이기 때문에 page클래스가 적용된 samplePage의 border속성을 4px solid #f00으로 변경합니다.

 

부모, 조상 노드 정리

부모 노드 찾기	부모 노드 찾기	$대상.parent()
	조상 노드 찾기	$대상.parents([“선택자”])

 

03.형제 노드 찾기

형제 노드란?

-같은 깊이에 있는 노드를 말합니다.

Ex) 다음과 같이 ul태그 안에 들어있는 li태그들을 쉽게 말해 형제 노드라고 합니다.

 

 

이전 형제 노드 찾기

$대상.prev()	특정 노드의 이전 형제 노드를 찾고 싶은 경우 사용
$대상.prevAll([“선택자”])	특정 노드의 모든 이전 형제 노드를 찾고 싶을 경우 사용

 

Ex01) 메뉴 항목에서 select 클래스가 적용된 노드의 바로 앞의 이전 노드(menu2)를 찾아 border를 “4px solid #f00”값으로 변경해 주세요.

 

 

var $select = $("ul.menu li.select");  à $select에 ul에menu클래스안 li에 select클래스가 적용된 노드를 찾아$select에 저장

$select.prev().css("border", "4px solid #f00") à $select노드 전 노드에 css(“border 속성 4px solid $f00”)로 변경

 

Ex02) 마지막 노드(menu06)의 모든 이전 형제 노드를 찾아 border 속성을 “4px solid #f00”으로 변경하세요

 

var $select = $(“ul.menu li:last“); à $select에 ul에menu클래스안 li중 마지막 노드를 선택자로 찾아서 저장.

$select.prevAll().css("border", "4px solid #f00"); à $select노드의 모든 전 노드에 css(“border 4px solid #f00”)적용

 

다음 형제 노드 찾기

$대상.next()	특정 노드의 다음 형제 노드를 찾고 싶은 경우 사용
$대상.nextAll([“선택자”])	특정 노드의 모든 다음 형제 노드를 찾고 싶을 경우 사용

Ex01) 메뉴 항목에서 select클래스가 적용된 노드의 바로 뒤의 다음노드(menu4)를 찾아 border를 “4px solid #f00”로 변경

 

 

var $select = $("ul.menu li.select");  à $select에 ul에menu클래스안 li에 select클래스가 적용된 노드를 찾아$select에 저장

$select.next().css("border", "4px solid #f00") à $select노드 다음 노드에 css(“border 속성 4px solid $f00”)로 변경

 

Ex02) 첫 번째 노드(menu1)를 기준으로 다음에 등장하는 모든 형제 노드를 찾아 border 속성을 “4px solid #f00”으로 변경하시오.

 

var $select = $(“ul.menu li:first“); à $select에 ul에menu클래스안 li중 첫번째 노드를 선택자로 찾아서 저장.

$select.nextAll().css("border", "4px solid #f00"); à $select노드의 모든 다음 노드에 css(“border 4px solid #f00”)적용