자바스크립트 querySelector nth-child 사용법(홀수, 짝수)

자바스크립트에서 DOM 요소를 선택하는 강력한 도구 중 하나인 document.querySelector 메서드는 다양한 방식으로 요소를 선택할 수 있게 해줍니다. 그중에서도 nth-child를 사용하면 특정 순서에 위치한 요소를 정확하게 선택할 수 있습니다. 이번 포스트에서는 이 방법을 좀 더 창의적으로 소개해 보려고 합니다. 웹 페이지의 구조를 조금 더 세밀하게 다루고, 어떻게 하면 효율적으로 필요한 요소를 찾아낼 수 있는지 알아보죠!

HTML 요소들을 다루다 보면, 간혹 특정 순서에 있는 자식 요소만을 선택하고 싶을 때가 있습니다. 단순히 클래스나 ID로는 구분되지 않는 요소들 말이죠. 이럴 때 바로 우리가 찾고 있는 해결책이 있습니다. 바로 nth-child 선택자를 사용하는 것이죠!

1. `nth-child` 선택자란 무엇일까?

nth-child는 CSS 선택자 중 하나로, 부모의 n번째 자식 요소를 선택하는 기능을 합니다. 이를 자바스크립트의 document.querySelector와 결합하면, 특정 위치에 있는 요소를 JavaScript로 조작할 수 있습니다.

기본 문법

element:nth-child(n)

여기서 element는 선택하려는 요소이고, n은 해당 요소가 부모 안에서 몇 번째인지 나타냅니다.

2. 자바스크립트에서 `nth-child` 사용하기

이제 자바스크립트에서 이를 어떻게 사용하는지 살펴볼까요? 예를 들어, HTML 코드에서 특정 리스트 항목을 선택하고 싶다고 가정해봅시다.

예시 HTML 코드:

<ul>
    <li>첫 번째 항목</li>
    <li>두 번째 항목</li>
    <li>세 번째 항목</li>
    <li>네 번째 항목</li>
</ul>

여기서 세 번째 항목을 선택하고 싶다면, 어떻게 할까요? 바로 이렇게 코드를 작성하면 됩니다.

자바스크립트 코드:

const thirdItem = document.querySelector('ul li:nth-child(3)');
console.log(thirdItem.textContent);  // 출력: 세 번째 항목

위 코드에서는 ul 요소 안의 li 태그 중 세 번째 항목을 선택했습니다. 이와 같은 방법을 사용하면, 클래스나 ID 없이도 특정 순서의 자식 요소를 선택할 수 있죠!

3. `nth-child`의 다양한 활용 방법

nth-child는 단순히 숫자만 사용할 수 있는 것이 아닙니다. 다양한 패턴으로도 활용할 수 있어요!

홀수/짝수 선택하기

홀수 요소만 선택하기:

const oddItems = document.querySelectorAll('ul li:nth-child(odd)');

짝수 요소만 선택하기:

const evenItems = document.querySelectorAll('ul li:nth-child(even)');

이 코드로 리스트의 홀수 또는 짝수 번째 요소만 선택할 수 있습니다. 예를 들어, 웹 페이지에서 홀수 항목만 특별히 강조하고 싶을 때 유용하겠죠?

특정 패턴 선택하기

nth-child(n)에서 n을 다양한 수식으로 표현할 수 있습니다. 예를 들어 2n+1과 같은 수식을 사용하면, 1, 3, 5, 7... 이렇게 홀수 번째 요소들을 선택할 수 있습니다.

const patternItems = document.querySelectorAll('ul li:nth-child(2n+1)');

이 패턴은 CSS에서 직접 사용할 때뿐만 아니라, 자바스크립트로 동적으로 요소를 선택할 때도 굉장히 유용합니다.

4. 실전 응용 예제

실제로 nth-child를 활용하면 굉장히 다양한 상황에서 효율적인 DOM 조작이 가능합니다. 예를 들어, 다음과 같은 시나리오를 생각해볼 수 있습니다.

시나리오: 동적으로 추가된 요소의 스타일 변경

사용자가 버튼을 클릭할 때마다 리스트 항목을 추가하는 상황을 가정해봅시다. 하지만 우리는 세 번째 항목마다 다른 스타일을 적용하고 싶습니다.

const list = document.querySelector('ul');
const addButton = document.querySelector('#add-item');

addButton.addEventListener('click', () => {
    const newItem = document.createElement('li');
    newItem.textContent = `새 항목 ${list.children.length + 1}`;
    list.appendChild(newItem);

    const thirdItems = document.querySelectorAll('ul li:nth-child(3n)');
    thirdItems.forEach(item => {
        item.style.color = 'red';  // 세 번째 항목마다 빨간색 적용
    });
});

이 예제에서는 버튼을 클릭할 때마다 새로운 리스트 항목을 추가하고, 세 번째 항목마다 텍스트 색상을 빨간색으로 바꾸는 코드를 작성했습니다. 이렇게 동적으로 DOM을 조작하면서 nth-child를 활용할 수 있습니다.

마무리

document.querySelector와 nth-child는 함께 사용하면 매우 강력한 도구가 됩니다. HTML 구조를 잘 이해하고, 적절하게 패턴을 설정하면 원하는 DOM 요소를 간단하게 선택할 수 있죠. 이 방법을 활용해 여러분의 웹 개발 프로젝트에 새로운 차원의 정밀함을 더해보세요!

여러분의 다음 웹 개발이 더욱 창의적이고 효율적이길 바랍니다! 😊

참고: nth-child는 1부터 시작합니다. 즉, 첫 번째 요소는 nth-child(1)로 선택됩니다. 이 점을 잊지 마세요!

저작자표시 비영리 변경금지

1. nth-child 선택자란 무엇일까?