jQuery 에서 find() 함수 사용법 / Vanilla JS로 바꾸기

- jQuery 로 하위 요소 선택하기 -

find()는 하위 요소를 선택하는 함수다.

$('tbody#fruitListBody tr');

 

위처럼 선택하면 id가 'fruitListBody'인 
tbody 태그 안에 있는 tr 태그들을 선택한다.

선택한 태그 안에서 다시 하위 요소들을 찾아야 할 때도 있다.
이럴 때는 find() 함수를 이용하면 된다.
예를 들어, tr 태그를 하나씩 불러와서
각각 어떤 처리를 해야 할 때 사용하면 편하다.

아래는 예제다.
tbody 태그 안에 있는 tr 태그들을 모두 부른다.
그 tr 태그들을 하나씩 불러와서 find 함수를 실행한다.
그러면 tr 태그 안에 있는 하위 요소들을 탐색할 수 있다.
하위 요소들 중에 가격 값이 들어 있는 td 태그와
갯수 값이 있는 태그에 각각 접근하여 값을 받아온다.
가격과 갯수를 곱한 값을 다른 태그에 넣어준다.

$('tbody#fruitListBody tr').forEach((item)=>{
    const price = $(item).find('td.price').text();
    const count = $(item).find('td.count').text();
    $(item).find('td.total').text(price * count);
});

- Vanilla JS 로 하위 요소 선택하기 -

jQuery를 쓰지 않고 Vanilla JavaScript만으로도 가능하다.
Vanilla js에서 비슷한 함수는 querySelector와 querySelectorAll이다.
이 함수들을 사용하면 그 하위 요소를 탐색한다.
보통 "document.querySelector" 형태로 많이 사용하는데,
document도 객체 요소 중 하나이므로, 
결국에는 document 객체 안에 있는 요소들 중에서 탐색하겠다는 뜻이 된다.
querySelector와 querySelectorAll의 차이는,
querySelector는 결과값을 하나만 받고, 
querySelectorAll은 조건을 만족하는 모든 요소들을 받는다.
위에서 들었던 jQuery 예제를 Vanilla js로 바꾸면 아래와 같다.

document.querySelectorAll('tbody#fruitListBody tr').forEach((item)=>{
    const price = item.querySelector(td.price).innerText;
    const count = item.querySelector(td.count).innerText;
    item.querySelector('td.total').innerText = price * count;
});

아래는 두 줄은 같은 기능을 한다.
특정 row를 클릭하면 
그 row 안에 있는 하위 요소들 중에
name이 fruitNum인 td 태그의 text값을 출력한다.

$('tbody#fruitListBody').on('click', '.fruitRow', function(e) {
    const fruitNum1 = $(e.currentTarget).find('td[name="fruitNum"]').text(); 
    const fruitNum2 = e.currentTarget.querySelector('td[name="fruitNum"]').innerText;
    console.log(fruitNum1);
    console.log(fruitNum2);
}

> 참고 자료
https://api.jquery.com/find/