DOMとは

DOMとは、Document Object Modelの略で、HTMLやXML文書のためのプログラミングインターフェイスです。
DOMではHTML、XMLドキュメントをオブジェクトのツリー状の集合として取り扱います。
このツリーをDOMツリーと呼びます。

DOM操作をする事で何が出来るの？

文書構造、スタイル、内容を変更することが出来るので、ユーザーに視覚的なフィードバックを与える事が出来ます。
Javascriptで動的にウィンドウを閉じてみたり、クリックすると色を変えるなど色々出来ます。

やり方

大きい流れは以下の通りです。

ドキュメント内の要素をメソッドで取得する。
取得した要素をプロパティで変更する。

実際にやってみよう

だらだら説明を続けてもよくわからないので、実際にDOM操作でh1要素のタイトルを取得して変更する作業をしてみましょう。

要素取得とプロパティの変更

まず以下のhtmlを用意します。

<html>
  <head>
    <title>DOMの操作練習</title>
  </head>
  <body>
    <h1 id="title">DOMの操作練習</h1>
  </body>
</html>

以下のようにh1のテキストが表示されていますね。

以下のようにJavaScriptのコードを追加してみます。

<html>
  <head>
    <title>DOMの操作練習</title>
  </head>
  <body>
    <h1 id="title">DOMの操作練習</h1>
  </body>
  <!-- 以下を追加 -->
  <script>
    // 1.DOM操作する対象の選択
    const title = document.getElementById('title');
    // 2.要素の変更
    title.textContent = 'タイトルを変更しました';
  </script>
</html>

すると以下のようにh1要素のテキストが変更されます。

一体何が行われたのか？

1.DOM操作する対象の選択
2.要素の変更
について詳しく見ていく事にします。

1.DOM操作する対象の選択

まずは、操作したい対象を選択しています。以下のコードを見て下さい。

const element = document.getElementById('title');

Documentオブジェクト

ここで出てくるdocumentは、Documentオブジェクトというものです。
Documentオブジェクトは、そのHTMLドキュメント全体を表現するオブジェクトになります。
JavaScriptでDocumentオブジェクトは、documentというグローバル変数でアクセス出来ます。

要素の取得

getElementById('title')でtitleというIDを持つ要素を取得します。
IDはDOMツリーの中で一意でなければなりません。

2.要素の変更

先程取得した要素のテキストを変更します。
textContentというプロパティを使えば、指定した要素のテキスト部分のみを取り出すことができます。

element.textContent = "タイトル変更";

1行でも書けるよ

説明しやすいので2行で書きましたが1行でつなげて書く事も出来ます。

document.getElementById('title').textContent = 'タイトルを変更しました';

イベントを使ったDOM操作

実際の業務では、イベントと組み合わせて使う事が多いです。
イベントとは「ボタンが押されたら」とか「送信されたら」といった動作の事です。
例えば以下の例は「取得した要素がクリックされたらlogを出力してね」というコードになります。

document.getElementById('title').onclick = function() {
  console.log('ログ出力'); 
}

getElementByIdで取得したtitleをクリックするとログ出力する事が出来ました。

よく使うDOM操作のまとめ(随時更新)

ドキュメント全体からspan要素だけを取得

document.getElementByTagName('span');

ドキュメント全体から全ての要素を取得

document.getElementByTagName('*');

取得した要素のclassを追加

document.getElementById(id).classList.add(class);
document.getElementById(id).classList.add(class1, class2);

classを削除

document.getElementById(id).classList.remove(class);

classをもっているか判定

document.getElementById(id).classList.contains(class);

指定したクラスをもっていれば消す、もっていなければ追加。

document.getElementById(id).classList.toggle(class);

取得された要素がクリックされたタイミングで起動

document.getElementById('title').onclick = function() {
  // 処理内容
}