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として取得します。このNodeListは配列と同様にインデックスで各要素へアクセスできます。

続いて forEach() メソッドで配列を反復処理します。コールバック関数には現在の要素（element）とそのインデックス（index）が渡されるため、divsArray[index] のようにして対応するdiv要素を特定し、そのid属性に配列の値を代入しています。

実行時の注意点

このコードを実行する際は、DOMの読み込みが完了している必要があります。scriptタグをbody要素の末尾に配置するか、DOMContentLoaded イベントを利用することをおすすめします。また、配列の長さが実際のdiv要素の数よりも多い場合、存在しない要素へのアクセスでエラーが発生する可能性があるため、事前に要素数を確認しておくと安全です。

これにより、配列の各要素を対応するdiv要素のidに正しくマッピングすることができます。