Element 찾기 (1)

이번장에서는 Element들을 찾아볼 것이다. Element를 찾기위해서는 id, class를 이용하는방법이 가장 기본적으로 사용되며 이외에 자식, 자손, 형제 element찾기, 순서대로 찾기, 특정 태그를 포함한 element찾기등 다양한 방법이 존재한다.

일단 가장기본적인 id, class이용하기, 자식,자손,형제 element찾기를 시작해보자.

밑은 오른쪽의 코드를 작성하면 어떻게 작동하는지 보기위한 도구이다. 

실행과 되돌리기 버튼을 눌러보면서 재밌게 공부해보자~!

1 <div id="childrenFind"> 

1-1 <div>

• 1-1-1 <li>
• 1-1-2 <li>

1-2 <p>

1-3 <div>

1-3-1 <p>

2

2-1

2-1-1

• 2-1-1-1 <li class="classFind"></li>
• 2-1-1-2 <li class="nextFind"> </li>
• 2-1-1-3
• 2-1-1-4 <li class="classFind"> </li>
• 2-1-1-5 <li id="idFind"> </li>

1. id를 이용하여 엘리먼트찾기

$('#idname')

id는 문서에서 하나만 사용가능한 고유값이다. 2-1-1-5를 살펴보면 li태그의 id값이 idFind이다. id값을 이용하여 li태그의 엘리먼트를 찾고 빨간색으로 표시해보자.

      

$(function(){

      $('#idFind').css('color', 'red');

});

2. class를 이용하여 엘리먼트 찾기

$('.classname');

class는 여러개의 엘리먼트를 선택하기 위해 사용한다. 2-1-1-1과 2-1-1-4를 살펴보면 li 태그의 class값이 classFind로 되어있다. 

     

$(function(){

 $('.classFind).css('color', 'red');

});

3. 자식 엘리먼트 찾기

$('#idname > tag')

자식엘리먼트를 찾기 위해서는 > 기호를 사용한다. 위의 예제에서는 id값이 childrenFind의 자식엘리먼트중 p태그를 찾는것이다. 1-2가 p태그이므로 저 위치가 빨간색으로 변할 것이다.

     

$(function(){

 $('#childrenFind > p).css('color', 'red');

});

4. 자손엘리먼트 찾기

$('#idname tag')

자식엘리먼트와 자손엘리먼트는 비슷하지만 다르다. 자식엘리먼트는 바로 밑의 엘리먼트를 지징차는것이고 자손엘리먼트는 밑으로 쭉 모든 엘리먼트를 지칭한다. 기호는 중간에 띄어쓰기를 해주면된다. 예제를 살펴보면 childrenFind의 자손중 p태그를 찾아라는 뜻이다. 1-2가 p태그로 포함이 될것이고 1-3-1또한 자손엘리먼트의 개념으로 포함이된다.

 
     

$(function(){

 $('#childrenFind p).css('color', 'red');

});

5. 형제 엘리먼트 찾기

$('#idname + tag')

형제엘리먼트는 자신과 동일한 선에 있는 엘리먼트들을 지칭한다. 기호는 +기호를 사용하며 1개가 있을경우 다음엘리먼트 두개일경우 다다음엘리먼트가 선택된다. 예제에서는 id값 nextFind 의 형제엘리면서 다음 li태그 엘리먼트를 선택하는 것이다.

     

$(function(){

 $('#nextFind + li).css('color', 'red');

});