【JavaScript】DOM操作とは？DOM操作をマスターできる方法を伝授！

どうも、こんにちは！ピコっそです。今回はJavaScript（以下JS）に関する記事です。今回は、JavaScriptをやっていく上で必須と言えるスキル、DOM操作についての解説記事を書いてみました。初心者向けの記事ですので、DOM操作がわからない人や、復習したい人向けに是非読んでみてください。

DOM操作とは
DOM操作の基本
まとめ
最後に

DOM操作とは

DOM操作（Document Object Model 操作）とは、HTMLで構築されたページの「構造」や「要素」を、JavaScriptを使って自由に読み取り・変更できる仕組みのことです。

・ボタンをクリックしたら文字が変わる
・画像が表示される
・フォームの入力内容に応じてエラーメッセージを出したりする

これらは全てDOM操作によって実現できます。

このようにDOM操作を使うことで、『Webページに「動き」や「変化」』を加えることができます。

DOM操作の基本

DOM操作では必ず３つの手順を行います。

１：HTML上にあるタグにidをつける

２：idの要素を取得する

３：取得された要素をどう動かすかコーディングする

しかし、上の３箇条だけではまだぱっと理解できない方もいると思います。次に実際のコードを例に上の３つの手順を解説をしようと思います。

１：HTML上にあるタグにidをつける

DOM操作でまず必ず行う手順の１つとして、HTML上にあるタグにidをつけることです。具体的な意味として下記のコードが挙げられます。

<body>
    <h2>JSテスト</h2>
    <div class="contents">
        <input type="button" id="btn1" value="ボタンを押す">
        <p>カウント:<span id="result"></span></p>
    </div>
</body>

上記のコード内にidタグで囲まれているコードがあります。

<input type="button" id="btn1" value="ボタンを押す">

<p>カウント:<span id="result"></span></p>

この二つの行になります。この二つの行にidタグを付けることで、そのタグがある箇所は何かしら動的な変化をもたらすことができるようになります。反対に、idタグを使わないとDOM操作を使用することができず、HTML上の要素を動かすことはできません。

つまり、idは「JavaScriptが探すための名前」であり、それがないとどこを動かしていいかわからなくなります。

２：idの要素を取得

DOM操作を行う手順の２つ目が、id要素の取得です。コードを例にして説明しましょう。

<body>

    <h2>JSテスト</h2>
    <div class="contents">
        <input type="button" id="btn1" value="ボタンを押す">
        <p>カウント:<span id="result"></span></p>
    </div>

<script>
    const btn1 = document.getElementById("btn1");
    const result = document.getElementById("result");
</script>
<body>

先ほどのコードの下の行にさらにidの要素を取得するコードを追加しました。追加したコードを引っ張り出してみると、以下の通りです。

<script>
    const btn1 = document.getElementById("btn1");
    const result = document.getElementById("result");
</script>

ここでidの要素を取得する際に必要となる宣言があり、それが、

const 定数名 = document.getElementById("idタグ名");

となります。上の宣言がないと、コードを書いたとしても、うまく機能しません。DOM操作を行う際には必ず上記の宣言を行ってからコードを書くようにしましょう。

３：取得された要素をどう動かすかコーディングする

手順１でidタグをつけて、手順２でidの要素を宣言した後、最後に宣言された要素をどう動かすかをコーディングしていきます。ここら辺からやっとコーディングの作業に入っていきます。ではコードを例にして解説します。

<body>

    <h2>JSテスト</h2>
    <div class="contents">
        <input type="button" id="btn1" value="ボタンを押す">
        <p>カウント:<span id="result"></span></p>
    </div>

<script>
    const btn1 = document.getElementById("btn1");
    const result = document.getElementById("result");
    let c = 0;

    btn1.addEventListener('click', ()=>{
        c = c + 1;
        result.textContent = c;
    });
</script>
</body>

コーディングをどのようにするかは任せますが、今回私は「ボタンを押した回数をカウントする」コードを作ってみました。追加した箇所は以下の通りです。

let c = 0;

btn1.addEventListener('click', ()=>{
    c = c + 1;
　　result.textContent = c;
});

このコードのポイントは以下の３つです。

・カウント用の変数cの初期値を０と定義

・イベントリスナーを使い、ボタンをクリックするごとにcに１を加算

・変数resultをcの数値に書き換える

ここで注意するポイントとして、コーディングする際には要素取得した各idにどう言う役割を持たせたいのかを意識しながら行うとうまくいきます。

まとめ

今回はJavaScriptのDOM操作について、初心者でもわかるようにコードを実例にして解説しました。今回紹介したコードの全体像は以下の通りです。

<body>
    <h2>JSテスト</h2>
    <div class="contents">
        <input type="button" id="btn1" value="ボタンを押す">
        <p>カウント:<span id="result"></span></p>
    </div>

<script>
    const btn1 = document.getElementById("btn1");
    const result = document.getElementById("result");
    let c = 0;

    btn1.addEventListener('click', ()=>{
        c = c + 1;
        result.textContent = c;
    });
</script>
</body>

このコードを元にDOM操作についてまとめると以下の通りです。

１：id=”btn1″ や id=”result” などHTML上にあるタグにidを付与

２：idの要素を取得
　　→取得する際は const 定数名 = document.getElementById(“idタグ名”);を宣言

３：取得された要素をコーディングして動かす
　　→要素を取得したidに役割を持たせるイメージでコーディング

また今回コードに出てきた、addEventListenerについてはまた後日記事にする予定です。