最新！JavaScript入門講座 DOM入門要素を取得する方法を解説

JavaScriptを学ぶ上で、DOMというものは必ず抑えておくべき項目です。世の中のWebサイトはこのDOMを駆使することで、様々なユーザビリティ・UI・UXを実現しているのです。今回は、そんなJavaScriptの登竜門である、DOMで要素の取得について初学者向けにわかりやすく解説していきます。

本記事のペルソナ

JavaScript初学者の方
DOM入門者
DOMで要素の取得について学びたい方

DOMで要素の取得
まとめ
参考文献

DOMで要素の取得

id名から要素を取得 (getElementByid)

では、最初にidから取得する方法を解説していきます。
要素を取得する方法はいくつかありますが、こちらがオーソドックスな方式となります。

では、早速見ていきましょう。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width = device-width ,initial-scale = 1" />
        <meta name="robots" content="noindex,nofollow" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <title>
            JavaScript入門講座
        </title>
        <script>

        </script>
    </head>
    <body>
        <h1>DOM入門</h1>
        <h2 id="js-head-2">プログラミング　JavaScript</h2>
        <p id="js-parag">DOM (Document Object Model )はとても面白いですよ</p>
        <script>
            let doc = document;
            let js_h2 = doc.getElementById("js-head-2");
            let js_parag = doc.getElementById("js-parag");

            console.log(js_h2);
            console.log(js_parag);
        </script>
    </body>
</html>

idから要素を取得するには、「getElementById」を使います。HTMLで属性を予め定義しておき、その定義した名前を使います。こうすることで、要素を取得することが可能です。

クラス名から要素を取得 (getElementsByClassName)

続いてクラス名から取得する方法を解説していきます。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width = device-width ,initial-scale = 1" />
        <meta name="robots" content="noindex,nofollow" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <title>
            JavaScript入門講座
        </title>
        <script>

        </script>
    </head>
    <body>
        <h1>DOM入門</h1>
        <p class="js-parag">Java</p>
        <p class="js-parag">JavaScript</p>
        <p class="js-parag">React</p>


        <p class="js-"></p>
        <script>
            let doc = document;
            let js_parag = doc.getElementsByClassName("js-parag");

            for(let i=0;i < js_parag.length;i++){
                console.log(js_parag[i]);
            }
        </script>
    </body>
</html>

このクラス名から取得する方法では、同じクラス名の要素を複数取得することが可能です。

タグ名から要素を取得する (getElementByTagName)

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width = device-width ,initial-scale = 1" />
        <meta name="robots" content="noindex,nofollow" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <title>
            JavaScript入門講座
        </title>
        <script>

        </script>
    </head>
    <body>
        <h1>DOM入門</h1>
        <h2 id="js-head-2">JavaScript</h2>

        <h2>React</h2>
        <h2>Angular</h2>
        <h2>Vue</h2>
        <h2>Next</h2>
        <h2>Nuxt</h2>
        <script>
            let doc = document;
            let js_parag = doc.getElementsByTagName("h2");

            for(let i=0;i < js_parag.length;i++){
                console.log(js_parag[i]);
            }
        </script>
    </body>
</html>

こちらは、タグから要素を取得します。この方法も、配列として複数の要素を取得することが可能です。

nameから要素を取得 (getElementsByName)

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width = device-width ,initial-scale = 1" />
        <meta name="robots" content="noindex,nofollow" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <title>
            JavaScript入門講座
        </title>
        <script>

        </script>
    </head>
    <body>
        <h1>DOM入門</h1>
        <h2 id="js-head-2">JavaScript</h2>

        <div name="js-div">HTML</div>
        <div name="js-div">CSS</div>
        <div name="js-div">JS</div>
        <script>
            let doc = document;
            let js_parag = doc.getElementsByName("js-div");

            for(let i=0;i < js_parag.length;i++){
                console.log(js_parag[i]);
            }
        </script>
    </body>
</html>

続いてはname属性を指定することで取得する方法です。こちらも、配列として複数の要素を取得できます。

CSSセレクタで指定して要素を取得 (querySelector,querySelectorAll)

続いては、要素取得のワイルドカードのような位置づけの方法です。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width = device-width ,initial-scale = 1" />
        <meta name="robots" content="noindex,nofollow" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <title>
            JavaScript入門講座
        </title>
        <script>

        </script>
    </head>
    <body>
        <header>
            <h1>DOM入門</h1>
        </header>
        <nav>
            <div id="js-div">HTML</div>
            <div id="js-div">CSS</div>
            <div id="js-div">JS</div>
        </nav>
        
        <main>
            <div class="js-cls">Python</div>
            <div class="js-cls">Ruby</div>
            <div class="js-cls">PHP</div>
        </main>


        <script>
            let doc = document;
            let js_qs = doc.querySelector("div");
            let js_qsa = doc.querySelectorAll("div");
            console.log(js_qs);

            for(let i=0;i < js_qsa.length;i++){
                console.log(js_qsa[i]);
            }
        </script>
    </body>
</html>

「querySelector」は指定されたものの上から１番目の要素を取得します。「querySelectorAll」指定した要素をすべて取得します。

また、これはタグ名のみでなく、id名、class名からも指定することで取得することができます。

js_qsa = doc.querySelectorAll(".js-cls");//クラス名を指定
js_qsa = doc.querySelectorAll("#js-div");//id名から指定

引数のこの書き方は、CSSでスタイリングをするときにする同じ書き方です。

まとめ

では今回のまとめに入ります。
今回は下記のことを学びました。

まとめ

要素の取得
getElementById
getElementsByTagName
getElementsByName
getElementsByClassName

参考文献

JavaScript DOM操作再入門① - Qiita

概要Angular2やReactをメインで使っていると、ちょっとした事でjQueryに頼るのが疎ましくなってきます。特にDOM操作は基本jQueryで行ってきたのですが、生のJavaScript…

文書の操作 - ウェブ開発を学ぶ | MDN

ウェブページやアプリケーションを書くとき、最もよく行うことのひとつが、何らかの方法で文書内の構造を操作することでしょう。これは通常、ドキュメントオブジェクトモデル (DOM) を使用することで行われます。これは HTML とスタイル情報を制御するための API のセットで、 Document オブジェクトを多用します。...

【DOM基礎】ノードの取得／属性の取得・設定 - Qiita

DOMとはDocument Object Model (DOM) は、HTML および XML ドキュメントのための API です。これはドキュメントの構造的な表現を提供し、内容や表示形態の変更を…