자바스크립트 nth-child 구하는 방법

웹 개발에서 nth-child는 특정 요소의 자식 요소 중 n번째 요소를 선택하는 데 유용한 CSS 선택자입니다. 자바스크립트를 사용하여 동적으로 nth-child를 구현하는 방법은 여러 가지가 있습니다.

1. querySelector() 및 nth-child() 사용

가장 간단한 방법은 querySelector() 메서드와 nth-child() 선택자를 함께 사용하는 것입니다. 다음 코드는 ul 요소의 3번째 li 요소를 선택합니다.

const thirdLi = document.querySelector('ul li:nth-child(3)');
console.log(thirdLi); // <li>3번째 항목</li>

2. querySelectorAll() 및 forEach() 사용

querySelectorAll() 메서드를 사용하여 nth-child 조건에 맞는 모든 요소를 선택한 후 forEach() 메서드를 사용하여 각 요소를 처리할 수 있습니다. 다음 코드는 ul 요소의 모든 짝수 번째 li 요소를 빨간색으로 변환합니다.

const evenLis = document.querySelectorAll('ul li:nth-child(even)');
evenLis.forEach((li) => {
  li.style.color = 'red';
});

3. for 루프 사용

for 루프를 사용하여 nth-child 조건을 직접 구현할 수 있습니다. 다음 코드는 ul 요소의 모든 자식 요소를 순회하며 5번째 요소를 선택합니다.

const ul = document.querySelector('ul');
let count = 1;
for (let child of ul.children) {
  if (count === 5) {
    console.log(child); // <li>5번째 항목</li>
    break;
  }
  count++;
}

4. Lodash 라이브러리 사용

Lodash와 같은 JavaScript 라이브러리를 사용하면 nth-child 구현을 더욱 간편하게 할 수 있습니다. 다음 코드는 Lodash의 nth() 함수를 사용하여 ul 요소의 3번째 li 요소를 선택합니다.

import _ from 'lodash';
const thirdLi = _.nth(document.querySelectorAll('ul li'), 2);
console.log(thirdLi); // <li>3번째 항목</li>

참고자료

• JavaScript querySelector() 메서드: https://developer.mozilla.org/ko/docs/Web/API/Document/querySelector
• JavaScript querySelectorAll() 메서드: https://developer.mozilla.org/ko/docs/Web/API/Document/querySelectorAll