DOM

【JavaScript】idでのDOM要素取得方法と複数要素を１行で取得する方法

更新日：2023/08/08

DOM要素をid属性で取得する方法を紹介します。
さらに、複数のDOM要素を取得するときに見た目がスッキリとした処理方法を紹介します。

 

DOM要素をidで取得する方法

DOM要素をidで取得するときは、次のようにdocument.getElementById()を使用します。

const element = document.getElementById( id文字列 );

IDが存在しないとき、結果がnullになります。

外部jsファイルとインラインスクリプトのどちらでも、読み込まれた時点ではDOM要素が構築されていません。
そのため、次のようにDOMContentLoadedイベントの発生を待つ必要があります。

document.addEventListener("DOMContentLoaded",()=>{
    const element = document.getElementById("p1");
    if( element === null ) alert("IDが存在しません");
    else element.innerText = "idがp1の要素です";
});

ただし外部jsファイルを次のようにdefer属性で読み込むと、DOM要素構築終了後にスクリプトが実行されます。
そのためDOMContentLoadedイベントの発生を待つ必要はありません。

<script defer type="text/javascript" src="xxxx.js"></script>

※DOMContentLoadedイベントは、deferスクリプト実行後に発生します。

 

複数のDOM要素を取得する時の問題点

問題点というほどではありませんが…

複数の要素をidで取得する場合、それぞれにdocument.getElementById()を実行する必要があります。
例えば10個の要素を取得するときは、次のようになります。

const id1= document.getElementById("id1");
const id2= document.getElementById("id2");
const id3= document.getElementById("id3");
const id4= document.getElementById("id4");
const id5= document.getElementById("id5");
const id6= document.getElementById("id6");
const id7= document.getElementById("id7");
const id8= document.getElementById("id8");
const id9= document.getElementById("id9");
const id10= document.getElementById("id10");

さらに20個、30個になると、エディター画面がこれだけで埋まってしまいますね。
いろいろ問題がありますが、とにかくかっこ悪い。

もっとエレガントにまとめたいですね。

 

取得要素が数個の場合

取得するDOM要素が5個程度の場合、id名の配列をmap()メソッドでDOM要素の配列に変換します。
その配列を分割代入で、変数に割り当てます。

const [id1,id2,id3,id4,id5] = ["id1","id2","id3","id4","id5"]
                    .map(e=>document.getElementById(e));
分割代入しないで配列のまま使用するのは、おすすめしません。
対応を意識しながらコードを組み立てていくのは至難の業ですし、その後の保守性は最悪です。

要素の存在チェックをしたいときは配列のままチェックして、最後に分割代入で変数に割り当てます。

const idArray = ["id1","id2","id3","id4","id5"];
const idElements = ["id1","id2","id3","id4","id5"]
                .map(e=>document.getElementById(e));
const errorIndex = idElements.findIndex( e=>e===null);
if( errorIndex >= 0 ){ 
    alert( `${idArray[errorIndex]}が存在しません`);return;
}
const [id1,id2,id3,id4,id5] = idElements;

もしくは、map()内でエラーをスローしてもいいかもしれませんね。

実際のところ、map()と分割代入を使用する方法は5個程度が限度です。
なぜなら、元となるid名配列と、分割代入先の変数配列の要素位置を厳密に一致させる必要があるからです。

後から増やしたり減らしたりすると、位置がズレるミスの確率が増えます。
数が少なければ気が付きやすいですが、数が多いと難しいですね。
よくあるバグ発生パターンです。

 

取得要素が多い場合

取得する要素が多いときは、オブジェクトのプロパティとして取得します。

const idElements = ["id1","id2","id3","id4","id5"]
                .reduce( (r,e)=>{
                        r[e]=document.getElementById(e);
                        return r;
                    },{}
                );
console.log( idElements );
 // 結果: {
 //     "id1" : div#id1
 //     "id2" : div#id2
 //     "id3" : div#id3
 //     "id4" : div#id4
 //     "id5" : div#id5
 //   }

オブジェクトのまま処理を進めてもいいですね。

もし、変数で取得したいときはオブジェクトの分割代入を使用できます。

const {id2,id4,id5} = idElements;

オブジェクトの分割代入は、記述する順番を意識する必要がありませんし、一部だけ取り出すこともできます。

使用する場面にもよりますが、必要な時に必要なものだけ変数にセットしましょう。

更新日：2023/08/08

書いた人（管理人）：けーちゃん

関連記事

スポンサーリンク

記事の内容について

null

こんにちはけーちゃんです。
説明するのって難しいですね。

「なんか言ってることおかしくない？」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。

掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。

ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php

 

このサイトは、リンクフリーです。大歓迎です。