JS - 바닐라js로 eq() 선택자 사용 방법

jQuery의 :eq() 선택자는 특정 인덱스의 요소를 선택하는 데 유용합니다. 하지만 바닐라 JavaScript를 사용하면 jQuery 없이도 동일한 기능을 구현할 수 있습니다.

 

바닐라js로 eq() 선택자 사용 방법

바닐라js로 eq() 선택자 사용 방법

 

1. querySelectorAll과 배열 인덱스 사용

2. nth-child CSS 선택자 사용

3. Array.from으로 NodeList를 배열로 변환

4. slice 메서드로 특정 범위 선택

5. filter 메서드로 조건부 선택

6. find 메서드로 단일 요소 선택

7. forEach로 순회하며 조건 검사

8. reduce로 특정 위치의 요소 선택

9. for 루프로 직접 순회

10. at 메서드로 음수 인덱스 지원

위의 목차를 클릭하면 해당 글로 자동 이동 합니다.

 

querySelectorAll과 배열 인덱스 사용

<div>
    <p>첫 번째 문단</p>
    <p>두 번째 문단</p>
    <p>세 번째 문단</p>
</div>
<script>
    const element = document.querySelectorAll('div > p')[2];
    console.log(element.textContent); // "세 번째 문단"
</script>

div > p 구조에서 특정 문단을 선택합니다.

querySelectorAll은 NodeList를 반환하며, 배열 인덱스로 특정 요소를 선택합니다.

 

nth-child CSS 선택자 사용

<ul>
    <li>첫 번째 항목</li>
    <li>두 번째 항목</li>
    <li>세 번째 항목</li>
</ul>
<script>
    const element = document.querySelector('ul > li:nth-child(3)');
    console.log(element.textContent); // "세 번째 항목"
</script>

ul > li 구조에서 특정 리스트 항목을 선택합니다.
nth-child는 CSS 선택자로, 특정 위치의 요소를 정확히 지정할 수 있습니다.

 

Array.from으로 NodeList를 배열로 변환

<div>
    <div>
        <span>첫 번째 span</span>
        <span>두 번째 span</span>
        <span>세 번째 span</span>
    </div>
</div>
<script>
    const elements = Array.from(document.querySelectorAll('div > div > span'));
    const element = elements[2];
    console.log(element.textContent); // "세 번째 span"
</script>

div > div > span 구조에서 특정 span 요소를 선택합니다.
Array.from은 NodeList를 배열로 변환하여 배열 메서드를 사용할 수 있습니다.

 

slice 메서드로 특정 범위 선택

<section>
    <article>첫 번째 article</article>
    <article>두 번째 article</article>
    <article>세 번째 article</article>
    <article>네 번째 article</article>
</section>
<script>
    const elements = Array.from(document.querySelectorAll('section > article')).slice(1, 4);
    elements.forEach(el => console.log(el.textContent)); // "두 번째 article", "세 번째 article", "네 번째 article"
</script>

section > article 구조에서 특정 범위의 article 요소를 선택합니다.
slice는 배열의 일부분을 추출할 때 유용합니다.

 

filter 메서드로 조건부 선택

<div>
    <div>
        <p data-id="1">첫 번째 문단</p>
        <p data-id="2">두 번째 문단</p>
        <p data-id="3">세 번째 문단</p>
    </div>
</div>
<script>
    const element = Array.from(document.querySelectorAll('div > div > p')).filter(el => el.dataset.id === '3')[0];
    console.log(element.textContent); // "세 번째 문단"
</script>

div > div > p 구조에서 특정 조건을 만족하는 p 요소를 선택합니다.
filter는 조건에 맞는 요소만 추출할 때 사용됩니다.

 

find 메서드로 단일 요소 선택

<ul>
    <li data-id="1">첫 번째 항목</li>
    <li data-id="2">두 번째 항목</li>
    <li data-id="3">세 번째 항목</li>
</ul>
<script>
    const element = Array.from(document.querySelectorAll('ul > li')).find(el => el.dataset.id === '3');
    console.log(element.textContent); // "세 번째 항목"
</script>

ul > li 구조에서 조건을 만족하는 첫 번째 li 요소를 선택합니다.
find는 조건을 만족하는 첫 번째 요소를 반환합니다.

 

forEach로 순회하며 조건 검사

<div>
    <div>
        <div>첫 번째 div</div>
        <div>두 번째 div</div>
        <div>세 번째 div</div>
    </div>
</div>
<script>
    let element;
    document.querySelectorAll('div > div > div').forEach((el, index) => {
        if (index === 2) element = el;
    });
    console.log(element.textContent); // "세 번째 div"
</script>

div > div > div 구조에서 특정 위치의 div 요소를 선택합니다.
forEach는 각 요소를 순회하며 조건을 검사할 때 유용합니다.

 

reduce로 특정 위치의 요소 선택

<section>
    <article>첫 번째 article</article>
    <article>두 번째 article</article>
    <article>세 번째 article</article>
</section>
<script>
    const element = Array.from(document.querySelectorAll('section > article')).reduce((acc, el, index) => {
        return index === 2 ? el : acc;
    }, null);
    console.log(element.textContent); // "세 번째 article"
</script>

section > article 구조에서 특정 위치의 article 요소를 선택합니다.
reduce는 배열을 순회하며 특정 조건에 맞는 값을 누적할 때 사용됩니다.

 

for 루프로 직접 순회

<div>
    <ul>
        <li>첫 번째 항목</li>
        <li>두 번째 항목</li>
        <li>세 번째 항목</li>
    </ul>
</div>
<script>
    const elements = document.querySelectorAll('div > ul > li');
    let element;
    for (let i = 0; i < elements.length; i++) {
        if (i === 2) {
            element = elements[i];
            break;
        }
    }
    console.log(element.textContent); // "세 번째 항목"
</script>

div > ul > li 구조에서 특정 위치의 li 요소를 선택합니다.
for 루프는 직접적인 제어가 필요할 때 유용합니다.

 

at 메서드로 음수 인덱스 지원

<div>
    <div>
        <p>첫 번째 문단</p>
        <p>두 번째 문단</p>
        <p>세 번째 문단</p>
    </div>
</div>
<script>
    const element = Array.from(document.querySelectorAll('div > div > p')).at(-2);
    console.log(element.textContent); // "두 번째 문단"
</script>

div > div > p 구조에서 음수 인덱스로 p 요소를 선택합니다.
at은 음수 인덱스를 지원하여 배열의 끝에서부터 요소를 선택할 수 있습니다.