【JavaScript入門】DOM操作でHTML要素を取得する方法

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、JavaScriptのDOM操作でHTML要素を取得する方法を解説していきます。

1 DOM操作のPoint
2 HTML要素の取得をするメソッド
3 Sample-Code-全文
4 JavaScript書籍 Ver. 中級-上級者向け
5 JavaScript書籍 Ver. 初級者向け
6 Twitterやってます！Follow Me！
7 参考・引用
8 【おすすめ関連記事】
9 最近の投稿

DOM操作のPoint

DOM操作における操作対象は、3つに分けられます。

要素: HTMLタグ
テキスト: HTMLタグに囲まれた文字列
属性: HTMLタグに設定された「 key:value 」のこと

DOM操作とはこれらに対して、作成・取得（読み取り）・更新・削除を行うことです。

いわゆる「CRUD処理」です。

HTML要素の取得をするメソッド

JavaScriptにはHTML要素の取得をするためのメソッドがあり、それを使ってHTML要素(HTML-Element)を取得していきます。

今回説明するのは、次の3つです。

document.getElementById()
document.querySelector()
document.querySelectorAll()

document.getElementById()

getElementByIdは引数で指定したIDを持つ要素を取得します。

構文: const element = document.getElementById(id);

引数idには、取得したいHTML要素のidを文字列で指定します。

戻り値の型はHTMLElementとなります。

<h2 id="robotama">document.getElementById() でHTMLタグを取得するロボ玉🔥</h2>

<script>
// 1. document.getElementById('id') => 指定したidの HTML-Elementを取得する

// 2. id='robotama' の要素を取得している
const robotama = document.getElementById('robotama');

console.log({robotama});
    // {robotama: h2#robotama}

</script>

document.querySelector()

IDだけでなく他の条件を指定して要素を取得することができるのが、querySelectorです。

構文: const element = document.querySelector(selector);

引数selectorにはCSSのセレクタを指定します。

idはもちろん、クラス名やタグ名、属性値などを指定できるので、様々な状況に対応することができます。

ただし、querySelectorでは、該当要素が複数存在する場合、最初の要素を返すという仕様になっているので注意が必要です。

ここで言う最初とは、HTMLの中でより上部に記述されている要素が優先されるということです。

<h2 id="hakutou">document.querySelector() でHTMLタグを取得する白桃🔥</h2>

<script>
// 1. document.querySelector('Selector') 
// => 「Selectorの記法」(CSSのStyle-Selector)で指定したHTML-Elementの最初に発見した要素を取得する

// 2. CSSのSelector と同じ記述で、id='hakutou' の要素を取得する
const hakutou = document.querySelector('#hakutou');
console.log({hakutou});
    // {hakutou: h2#hakutou}

</script>

document.querySelectorAll()

querySelectorAll()は、指定したSelectorに該当するすべての要素を取得することができます。

構文: const nodeList = document.querySelectorAll(selector);

引数にはquerySelectorと同様にCSSのセレクタ記法を使います。

戻り値は、NodeListと言うHTMLElementが集まった配列のようなものです。

<div class="robotama-project" >
    <ol>
        <li>ロボ玉試作1号機🔥</li>
        <li>ロボ玉試作3号機🔥</li>
        <li>ロボ玉試作4号機🔥</li>
    </ol>
</div>

<script>
// 1. document.querySelectorAll()
// => 「Selectorの記法」(CSSのStyle-Selector)で指定した、すべてのHTML-Elementの要素を取得する

// 2. robotama-projectクラスの li をすべて取得している
const robotamaProjectList = document.querySelectorAll('div.robotama-project li');
console.log({robotamaProjectList});
    // robotamaProjectList: NodeList(3) [li, li, li]

</script>

Sample-Code-全文

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM-Element-Get🔥</title>
</head>
<body>
    <h1>DOM-Element-Getだぜロボ玉🔥</h1>

    <h2>DOM操作のPoint</h2>
    <h3>DOM操作における主要な操作対象は以下の3つに分類することができます。</h3>
    <ol>
        <li>要素: HTMLタグ</li>
        <li>テキスト: HTMLタグに囲まれた文字列</li>
        <li>属性: HTMLタグに設定された「 key:value 」のこと</li>
    </ol>

    <h3>DOM操作とはこれらに対して何らかの操作を行うことです。
        <br>
        操作とは主に、取得（読み取り）、更新、作成、削除となります。
    </h3>

    <h2>JavaScriptには要素の取得をするための関数があります。</h2>
    <ol>
        <li>document.getElementById()</li>
        <li>document.querySelector()</li>
        <li>document.querySelectorAll()</li>
    </ol>

   
    <h2>document.getElementById()</h2>
    <ol>
        <li>getElementByIdは引数で指定したIDを持つ要素を取得します。</li>
        <li>構文: let element = document.getElementById(id);</li>
        <li>引数idには取得した要素のidを文字列で指定します。戻り値の型はHTMLElementとなります。</li>
    </ol>

    <h2>document.querySelector()</h2>
    <ol>
        <li>IDだけでなく他の条件を指定して要素を取得することができるのが、querySelectorです。</li>
        <li>構文: let element = document.querySelector(selector);</li>
        <li>引数selectorにはCSSのセレクタを指定します。
            <br>
            IDはもちろん、クラス名やタグ名、属性値などを指定できるので、様々な状況に対応することができます。
        </li>
        <li>querySelectorでは、該当要素が複数存在する場合、最初の要素を返すという仕様になっているので注意が必要です。
            <br>
            最初というのはHTMLの中でより上部に記述されている要素が優先されるということです。
        </li>
    </ol>

    <h2>document.querySelectorAll()</h2>
    <ol>
        <li>querySelectorAll()は、該当するすべての要素を取得することができます。</li>
        <li>構文: let nodeList = document.querySelectorAll(selector);</li>
        <li>
            引数にはquerySelectorと同様にCSSセレクタを使います。
            <br>
            戻り値はNodeListオブジェクトでHTMLElementを複数集めたモノと思ってください。条件に該当する全ての要素の情報が入っています。
        </li>
    </ol>

    <h2 id="robotama">document.getElementById() でHTMLタグを取得するロボ玉🔥</h2>

    <h2 id="hakutou">document.querySelector() でHTMLタグを取得する白桃🔥</h2>

    <div class="robotama-project" >
        
        <h2>document.querySelectorAll() でロボ玉開発計画のProject-Listをすべて取得する🔥</h2>

        <ol>
            <li>ロボ玉試作1号機🔥</li>
            <li>ロボ玉試作3号機🔥</li>
            <li>ロボ玉試作4号機🔥</li>
        </ol>
    </div>

    <script>
        // 1. document.getElementById('id')
        // => 指定したidの HTML-Elementを取得する
        const robotama = document.getElementById('robotama'); // id='robotama' の要素を取得している
        console.log({robotama});
            // {robotama: h2#robotama}


        // 2. document.querySelector('Selector') 
        // => 「Selectorの記法」(CSSのStyle-Selector)で指定したHTML-Elementの最初に発見した要素を取得する

        // CSSのSelector と同じ記述で、id='hakutou' の要素を取得する
        const hakutou = document.querySelector('#hakutou');
        console.log({hakutou});
            // {hakutou: h2#hakutou}


        // 3. document.querySelectorAll()
        // => 「Selectorの記法」(CSSのStyle-Selector)で指定した、すべてのHTML-Elementの要素を取得する

        const robotamaProjectList = document.querySelectorAll('div.robotama-project li');
        console.log({robotamaProjectList});
            // robotamaProjectList: NodeList(3) [li, li, li]

    </script>
</body>
</html>