【初級編DAY14】Web制作初心者のためのJavaScript基礎講座（DOM操作）

サイトに動きを付けるためにはJavaSprictでDOM操作することで動きをつけることができます。DOM操作について学んでいきましょう！

DOM操作とは

■DOMとは■

HTMLなどのドキュメントにJavaScriptからアクセスするための仕組み

下記にて詳しく説明します。

まず、HTMLの構造を理解しておきましょう。

階層構造：ツリー構造（上の階層から順になっていること）
オブジェクト：document

該当のHTMLすべてをコンソール画面に表示するには

console.log(document);

とすることで、HTMLの階層がコンソール画面に表示されます。

以上のようにHTMLデータはdocumentであることを覚えておきましょう。

JavaSprictでHTMLに動きをつけたり変更するには、このdocument内（HTML）から特定のデータや要素を探し出し、様々なメソッドを当てていくことが必要となります。

このようなJavaSprictからHTMLなどのdocumentにアクセスすることをDOM操作といいます。

では実際にJjavascript からHTMLを取得してみましょう。

---

HTML要素の取得

では、JavaSprictからHTMLの要素（id、class、タグ、属性　等）を取得してみましょう。

HTML要素を取得するために今回は3種類の方法を解説します。

• querySelector("セレクタ")
  セレクタと一番最初に一致した要素を呼び出す
• querySelectorAll("セレクタ")
  セレクタと一致したすべての要素を呼び出す（オブジェクトで返ってくるため、各要素を呼び出すには繰り返し処理が必要）
• document.getElementsBy～
  各セレクタで呼び出すためのメソッド

 

■セレクタの指定方法■

• id・・・#id名（＃シャープ）
• class・・.class名（.ドット）
• タグ・・タグ名（そのまま）
• 属性・・[属性名]（大かっこ※href要素などの属性の中に""がある場合は外側は''シングルで囲いましょう。例(’[href=”http://〇〇”]’

上記のように、("セレクタ")の部分には指定方法はCSSセレクタの記法とほぼ同じですね！

下記にて詳しく見ていきましょう。

---

最初に一致したセレクタ要素を取得【document.querySelector】

 

■document.querySelectorとは■

指定したセレクタと一番最初に一致した要素を呼び出せるメソッド。document.querySelectorで取得したいセレクタを指定することで、document＞セレクタで一致する最初の要素のみを取得することできます。

基本

document.querySelector("セレクタ")

例

console.log(document.querySelector("#header-title"));

コンソール画面にdocument内のid#header-titleに一致したHTML要素が表示されます。

※コンソール画面にたくさんの情報が出来た！※

現在の指定だと、id　#header-title　に関するすべてのHTML情報がオブジェクトで返ってきているような状態となります。現在はHTMLの要素を呼び出しているのでそれでOKです！

ここからまたさらに必要な情報を絞り込む必要があります。指定の方法は次項に乗せています。コチラからどうぞ。（下記2通りも同様です。）

一致したすべてのセレクタ要素を取得【querySelectorAll】

■document.querySelectorAllとは■

セレクタと一致したすべての要素を呼び出します。

document.querySelectorAllで取得したいセレクタを指定することでdocument＞セレクタでセレクタと一致するすべての要素を取得することできます。

しかし、取得したデータはオブジェクトデータで返ってきます。個別に取得するためには繰り返し処理が必要となることを覚えておきましょう。

基本記述

document.querySelectorAll("セレクタ")

セレクタに該当したすべての情報がオブジェクト形式で返ってきます。

オブジェクトの形式で返ってきますので、このままをconsole.log使用しても一番最初のものしか表示がされません。そのため、繰り返し処理を使用して表示していきましょう。

繰り返し処理を使用し、呼び出したオブジェクトを個別に取り出す

先ほどの用のquerySelectorAllで呼び出した.textのオブジェクトデータを変数に格納し、すべてをコンソール画面に書き出しています。

例

// 一致する要素をすべて取得

const items = document.querySelectorAll(".text");

//繰り返し方法① (for)で個別に取り出す

for (let item of items) {

  console.log(item);

}

//繰り返し方法②　(forEach)で個別に取り出す

items.forEach(function (item) {

  console.log(item);

});

解説

1. querySelectorAllを使用し.textに一致するすべての要素を変数itemsに格納
2. 繰り返し方法でitemsからitemに書き出しをしてコンソール画面に表示させる（上記は二通りforまたはforEachにて繰り返し処理を記載

👇繰り返し処理についての復習はコチラから👇

chimu-dailytry.hatenablog.com

---

各セレクタで呼び出す【getElementsBy～】

■document.getElementsBy～とは■

各セレクタで呼び出すためのメソッド
id名、class名など決まっているものを指定するときに使用する。

※使用の注意※
呼び出すものが変わらないときは良いが、クラス名からid名に変更となった際、こちらを使用している場合はメソッドごと書き換えが必要となる。

そのため汎用性高く使えるquerySelector()で進めていくのがおすすめとされている。

基本記述

// // idで取得

document.getElementById("id名")

// classで取得

document.getElementsByClassName("class名")

// name名で取得

document.getElementsByName("name名")

// タグで取得

document.getElementsByTagName("タグ名")

// 属性で取得

document.querySelector("[属性]")

---

キー、プロパティを絞る

これまでで、JavaSprictを使用してHTMLの要素を取り出すことをしました。その際返ってきた情報は該当するHTML要素に関するすべての情報が載っていたかと思います。

では、その中から、必要なプロパティを取り出しましょう。

基本

console.log(document.querySelectorA("セレクタ名").outerHTML);

該当するdocument＞該当セレクタ名＞outerHTMLのみが取り出されます。

outerHTMLのほかにもinnerHTMLなどいろいろな情報がHTMLの中には含まれています。その一つ一つの情報を絞り込み呼び出すイメージです。

覚える必要はないですが、document＞セレクタ（すべての情報）＞要素となることを覚えておきましょう！

では、ここからは本格的にJavaSprictを使用して、HPに動きを付けていきましょう。

---

Javascript で動きを付ける

JavaSprictで行う処理のほとんどがは「取得 → 加工 → 出力」の流れとなります。

下記の処理を行ってみましょう

1. タイトル文字書き換え
2. タグ、要素の追加【createElement、setAttribute、appendChild】
3. ボタン操作、アクション操作【click】
4. イベント監視【window.onload、addEventListener】

下記にてそれぞれ解説をしていきます。

タイトル文字書き換え

id#titleの文字をJavaSprictを使用して変更します。

例

// innerTextの書き換え

document.querySelector("#title").innerText = "タイトル〇〇";

呼び出したid#titleのinnerTextを変更することで、JavaSprictを使用してのタイトル変更をすることができました。

タグ、要素の追加【createElement、setAttribute、appendChild】

親要素であるclass.btn-itemがあるとします。

その中に新しく「ログイン」と表示されたリンクボタンを追加していきましょう。

例

//新規にaタグを作成

const button = document.createElement("a");

//テキストを追加

button.innerText = "ログイン";

//setAttributeでclassを追加

button.setAttribute("class", "btn");

//setAttributeでhrefを追加

button.setAttribute("href", "https://〇〇〇/");

//親要素.appendChild(追加したい要素)でbuttonを追加

document.querySelector(".btn-items").appendChild(button);

■使用しているメソッド■

・createElement
新しい要素の追加。(””)内に追加したい要素を記載。

・setAttribute
新しい属性の追加。(”属性”,"値")を指定。

・appendChild
特定の親要素の最後に子要素として追加。(変数)を記載することでその変数が親要素の最後へ追加される。

解説

1. createElementを使用してaタグを変数buttonに格納（button内　<a><a/>）
2. buttonのinnerTextに”ログイン”を追加（button内　<a>ログイン</a>）
3. setAttributeで属性class名を追加。（button内　<a class="btn">ログイン</a>）
4. setAttributeで属性href名を追加。（button内　<a class="btn" href="http://〇〇〇/">ログイン</a>）
5. querySelectorで追加したい親要素を取得。指定した親要素の最後にappendChildで完成した変数buttonを追加する。
6. 完成！

ボタン操作、アクション操作【click】

JavaSprictを使用してボタンをクリックします。

■使用するメソッド■

click();

例

document.querySelector("セレクタ名").click();

自動的にJavaSprictを使用してボタンをクリックさせることが可能となりました。リンク表示のあるボタンやセレクタを指定することでリンクへ飛ばすことが可能です。

イベント監視【window.onload、addEventListener】

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

ページの読み込みが完了したらアラートを表示させる

■使用するメソッド■

window.onload

例

window.onload = function () {

    alert("読み込みが完了しました");

  };

ページ読み込みが完了と共に関数を指定してアラート”読み込みが完了しました"を表示しています。

ボタンがクリックされたときにアラートを表示させる

■使用するメソッド■

addEventListener(イベントの種類, 通知を受けるオブジェクト)

例

document.querySelector("セレクタ名").addEventListener("click", function () {

    alert("ボタンがクリックされました");

  });

ボタンを押したときにアラート"ボタンがクリックされました"が表示されます。

解説

1. querySelectorで要素を取得。
2. addEventListenerのイベントを指定。"click"と指定することで先ほど指定した要素がクリック（イベント）があった際に次の引数に通知される。
3. 通知を受けるオブジェクトとしてfunctionを指定しているため、function関数内のアラートが表示される。

---

少しずつJjavascript を使用したサイトに動きをつける方法がわかってきましたね！かっこいいサイト制作を目指して頑張っていきましょう♫

スニペット登録も活用しながら効率よくやっていきましょうね！

今日はここまで٩( ''ω'' )وお疲れ様でした。