[jQuery] #8 요소 탐색

1. 요소 탐색하기

 

 제이쿼리로 요소들을 탐색할 수 있다.

 요소를 탐색한다고?

 이해를 돕기 위해 아래의 테이블을 만들었다.

<h3>요소 탐색</h3>
<table border="1">
    <tbody>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
    </tbody>
</table>

 

 여기서 요소를 탐색한다는 것은,

 예를 들어 5를 기준으로 앞에 있는 4를 찾는 방법을 뜻하거나, 부모-자식간의 관계를 찾는 것을 뜻한다.

 이렇게 어느 요소를 기준으로 다른 요소에 접근하는 방법을 알아보자.

 

 

2. 요소의 관계에 따라 탐색하기

 

 요소의 관계에 따라 탐색을 한다는 것은 DOM 구조에서 원하는 요소까지 이동하고 찾아가는 것을 의미한다.

 여기서 DOM(Document Object Model) 구조란 웹 페이지에 대한 인터페이스를 뜻한다.

 돔구조에 대해 좋은 블로그글을 아래 달아놓으니 같이 공부해도 좋을 듯 하다.

 참조 : https://wit.nts-corp.com/2019/02/14/5522

DOM은 정확히 무엇일까? | WIT블로그

 

 

 아무튼, 이제 각 요소에 접근을 해보자.

 jQuery에서 요소에 접근하는 메서드는 다음과 같은 종류가 있다.

메서드 이름	기능
eq(*)	* 번째 요소에 접근
prev()	접근한 요소의 앞 요소에 접근
next()	접근한 요소의 다음 요소에 접근
parent()	접근한 요소의 부모 요소에 접근
children()	접근한 요소의 자식 요소에 접근

 

 이를 적절히 순차적으로 사용하면 원하는 요소를 찾아갈 수 있다.

 아래의 코드를 살펴봐보자.

$("td").eq(2).css("background", "red")
       .prev().css("background", "yellow")
       .parent()        // 첫번째 tr
       .next()          // 두번째 tr
       .children()      // 두번째 자손 td -> 4,5,6
       .eq(1).css("background", "blue");

 

 1) 먼저 td의 2번째 요소를 선택해 빨강색으로 칠했다 - 3이 빨강색으로 칠해질 것이다.

 2) 그 앞 요소를 노랑색으로 칠했다 - 2가 노랑색으로 칠해질 것이다.

 3) parent()로 부모 요소를 택한다 - 첫 번째 줄 <tr>이 선택되었다

 4) next()로 다음 요소를 택한다 - 두 번째 줄 <tr>이 선택됐다.

 5) children()으로 그 요소의 자식 요소를 택한다 - 두 번째 줄의 자손인 <td>들이 선택된다.

 6) 그 중 1번째 요소를 선택해 파랑색으로 칠했다 - 5가 파랑색으로 칠해질 것이다.

 

 결과 모습은 아래와 같다.

 

 이런 방식으로 제이쿼리를 사용해서 요소에 접근할 수 있다.