デイトラWeb制作 Day16 -JavaScript基礎講座（DOM操作）-

動きが付けられると、プログラミングしてる～、っていう感じで楽しくなってきます。
20年前には、オブジェクトって意味わからん、って思っていました。初心者向け情報がたくさんある、素晴らしい時代になりました。

「DOM」とは

Document Object Modelの略称
HTMLやXMLドキュメントなどのマークアップ言語と、CSSをJavaScriptなどのプログラミング言語からアクセスできるようにするためのAPI（仕組み）

• DOMは、HTMLやXMLのドキュメントをオブジェクトとして扱うための仕組みで、これを「ツリー構造」として表現します。DOMにおいて、ドキュメントの各要素やテキストは「ノード」として表現されます。

• ノードにはいくつかの種類があり、例えばHTMLの要素を表すものを「要素ノード」と呼び、要素の中に記述されているテキストを「テキストノード」と呼びます。

• DOMを利用することで、ウェブページ上のテキスト、画像、リンクなどの要素にアクセスしたり、それらの要素を変更、追加、削除することが可能です!

id名で取得する

//id名で取得

console.log(document.querySelector("#js-title").outerHTML);
//または、
console.log(document.getElementById("js-title").outerHTML);

どちらを使ってもよいが、「querySelector」の方がid名にもclass名にも使えるので汎用性が高い。

class名で取得する

※同じクラス名の要素が複数ある場合、順番に取り出す方法。
Allをつけないと、見つかった初めの1つのみを取得する。
for文は前回の繰り返し処理の復習です。

//クラス名で取得
const elements = document.querySelectorAll(".text");
for (let element of elements) {
  console.log(element.outerHTML);
}

タグ名で取得する

//タグ名で取得

console.log(document.querySelectorAll("h1").outerHTML);
//または、
console.log(document.getElementsByTagName("h1").outerHTML);

注：href属性は「”」で囲まれているので、属性を囲むのは「'」をつかわないとエラーになる。

ちなみに、、outerHTMLって？

outerHTML プロパティでは要素自身と要素に含まれる HTML 文を取得

htmlが下記の時、
<p class="text">JavaScript学習中</p>

//outerHTML
const elements = document.querySelector(".text").outerHTML;

コンソール→　<p class="text">JavaScript学習中</p>

innerHTMLは、対象の要素に含まれる HTML 文を取得

//innerHTML
const elements = document.querySelector(".text").innerHTML;

コンソール→　JavaScript学習中

DOMの操作

テキストを書き換える。

document.querySelector("#js-title").innerText = "Hello, JavaScript!";

要素を追加する。

例：ボタンを追加する。

const button = document.createElement("a");  //HTML要素を生成

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

//要素の属性を追加
button.setAttribute("href", "https://developer.mozilla.org/ja/docs/Web/API/Node/appendChild");
button.setAttribute("target", "_blank");
button.setAttribute("class", "btn");

//作ったHTML要素を、親要素に追加
document.querySelector("#js-btn-wrap").appendChild(button);

Document:createElement() メソッド

HTML 文書において、 tagName で指定された HTML 要素を生成する。

Element: setAttribute() メソッド

指定された要素の属性の値を設定する。属性が既に存在する場合は値が更新され、そうでない場合は指定された名前と値で新しい属性が追加されます。

Node: appendChild() メソッド

指定された親ノードの子ノードリストの末尾にノードを追加する。

イベント監視

ページの読み込み時

// ページ読み込み時に実行
window.onload = function() {
  alert('ページ読み込み完了！');
}

クリックされた時

//クリックボタンがクリックされたらアラート表示
document.querySelector("#js-btn").addEventListener('click', function() {
  alert('クリックされました！');
});