JavaScript에서 배열과 루프를 활용해 DOM 요소의 속성을 설정하는 방법

JavaScript에서 배열과 루프로 div의 id 속성 설정하기

배열을 인수로 받아, 특정 DOM에 존재하는 처음 n개의 div 요소의 id 속성을 배열의 값에 맞게 변경하는 함수를 작성해야 한다고 가정해 보겠습니다. 여기서 n은 배열의 길이입니다.

이 문제를 해결하려면 먼저 DOM 내의 모든 div 요소를 선택한 뒤, 함수의 유일한 인수로 전달받은 배열을 순회하면서 각 div에 대응하는 id 값을 차례로 할당하면 됩니다.

구현 코드

const array = ['navbar', 'sidebar', 'section1', 'section2', 'footer'];
const changeDivId = (arr) => {
    const divsArray = document.querySelectorAll('div');
    arr.forEach((element, index) => {
        divsArray[index].id = element;
    });
};
changeDivId(array);

코드 동작 원리

document.querySelectorAll('div')는 문서 내 모든 div 요소를 NodeList 형태로 반환합니다. 이후 forEach 메서드를 사용해 배열을 순회하면서, 각 단계에서 현재 요소(element)와 인덱스(index)를 활용해 divsArray[index].id = element; 코드로 해당 위치의 div에 id를 지정합니다.

이렇게 하면 배열의 각 요소가 순서대로 div의 id 속성에 성공적으로 매핑됩니다. 즉, 위 예제에서는 첫 번째 div에는 'navbar', 두 번째 div에는 'sidebar'와 같은 방식으로 id가 부여됩니다.

주의할 점

배열의 길이가 실제 DOM에 존재하는 div 개수보다 크면 undefined에 접근하게 되어 오류가 발생할 수 있습니다. 안전한 실행을 위해 다음과 같이 조건 검사를 추가하는 것이 좋습니다.

const changeDivId = (arr) => {
    const divsArray = document.querySelectorAll('div');
    arr.forEach((element, index) => {
        if (divsArray[index]) {
            divsArray[index].id = element;
        }
    });
};