「DOM」を一言で説明すると、HTMLなどのドキュメントにJavaScriptからアクセスするための仕組みのことです。

これまでHTMLを書くときは、html > body > section...というように階層形式で書いてきましたよね。

このようなHTMLの階層構造を「ツリー構造」と呼び、全てのHTMLデータは一番上の階層から順番にオブジェクトデータとしてまとめられています。

全体のHTMLデータが入っているオブジェクトは「document」です。試しに初級編で作ったHTMLを開き、検証 > Consoleから"console.log( document )"を実行してみてください。

動画のようにページ全体のHTMLデータが表示されているのが見えたはずです。

この全てのデータを持ったdocumentから、特定のHTMLデータを探し出し、様々なメソッドを当てていくことで、動きをつけたり文字を変更したりするわけです。

百聞は一見に如かずなので、早速JavaScriptを使ってDOM操作を試してみましょう！

練習用ファイルをダウンロードしよう

まずは簡単なHTML・CSSを題材に、DOM操作について学んでいきましょう。

練習用ファイルは以下のリンクからダウンロードしてご利用ください。 今回はJavaScriptの学習がメインなので、HTML・CSSはあらかじめ用意してあります。

ファイルダウンロードはこちら👇

HTML要素の取得

querySelector("セレクタ")メソッドではセレクタと一致する最初の要素を取得することできます。 ※セレクタの指定方法はCSSセレクタの記法とほぼ同じなので、すでにCSSを学習されてる方にとっては覚えやすいかと思います。

他にもidで取得するgetElementById()や、クラスで取得するgetElementsByClassName()、タグで取得するgetElementsByTagName()などがありますが、汎用性高く使えるquerySelector()で進めていきましょう！

コピー// idで取得
document.querySelector("#id名")
document.getElementById("id名")

// classで取得
document.querySelectorAll(".class名")
document.getElementsByClassName("class名")

// タグで取得
document.querySelectorAll("タグ名")
document.getElementsByTagName("タグ名")

// 属性で取得
document.querySelector("[属性]")

querySelector()メソッドでは一致する最初の要素を取得することできましたが、一致するすべての要素を取得するにはquerySelectorAll("セレクタ")メソッドを使います。

取得した要素はオブジェクトで返ってきますので、個別に取得するためには繰り返し処理が必要になります。

コピー//一致する要素をすべて取得
const elements = document.querySelectorAll(".text");

//繰り返し処理で個別に取り出す(for)
for (let element of elements) {
  console.log(element);
}

//繰り返し処理で個別に取り出す(forEach)
elements.forEach(function (element) {
  console.log(element);
});

コピー"Document Query Selector All": {
  "prefix": "dq",
  "body": [
    "document.querySelector${1:All}(\"$2\")",
  ],
  "description": "Document Query Selector All"
}

取得した要素を操作してみよう

先ほどはHTMLの取得を学習しましたが、取得してコンソール画面に表示するだけではプログラミングぽくはなかったかと思います。

今回は取得したHTMLの文字を書き換えるという処理を学んでいきましょう。 JavaScriptで行う処理のほとんどが 「取得 → 加工 → 出力」の流れになります！

コピー// 『デイトラ』の文字をJavaScriptを使って『Daily Trial』に書き換えてみよう！
document.querySelector("#js-title").innerText = "Daily Trial";

先ほどは、HTMLタグのテキストの書き換えを学習しましたが、今回はタグそのものを追加していきましょう。
登録ボタンの横に、新しくログインボタンを表示させるコードを書いていきます。
追加するタグの情報は <a href="https://tokyofreelance.jp/" class="btn">ログイン</a> です！

コピー//新規にaタグを作成
const button = document.createElement("a");

//テキストを追加
button.innerText = "ログイン";

//setAttributeでclassを追加
button.setAttribute("class", "btn");

//setAttributeでhrefを追加
button.setAttribute("href", "https://tokyofreelance.jp/");

//親要素.appendChild(追加したい要素)でbuttonを追加
document.querySelector("#js-btn-wrap").appendChild(button);

JavaScriptを使って何かしらのアクションを起こす方法を学んでいきましょう。 今回は登録ボタンをJavaScriptからクリックしていきます！

登録ボタンはデイトラサイトへのリンクになっているので、ページが遷移されれば成功となります！ 本来はボタンをクリックしないと動かないものが、JavaScriptからクリックを実行できるので、ぜひ覚えておいてください！

コピー//JavaScriptからクリックしてデイトラのページに遷移すれば成功！
document.querySelector("#js-register").click();

ページが読み込まれた時やクリックされた時など、なにか特定のイベントをきっかけに処理を実行しましょう！

onloadイベント

コピー//ページの読み込みが完了したらアラートを表示させよう！
window.onload = function () {
  alert("読み込みが完了しました");
};

clickイベント

コピー//js-btnがクリックされた時にアラートを表示させよう！
document.querySelector("#js-btn").addEventListener("click", function () {
  alert("ボタンがクリックされました");
});