HTMLの標準オブジェクトモデルおよび、プログラミングインターフェイスであるDOMについてまとめました。
DOMは、Webアプリケーション制作にかかせない知識となっています。
ぜひ最後までお読みください！
【DOM】基本のまとめ | 初心者向け
1. DOMとは
DOMとは、HTMLドキュメントを操作するためのAPI(アプリケーション・プログラミング・インタフェース)のことです。
正式名称は、Document Object Model(ドキュメント・オブジェクト・モデル)といいます。
HTMLドキュメントをノードのツリー(木構造)として表し、HTML要素を簡単に取得・変更・追加・削除できることが特徴です。
2. DOMで扱うデータ型(インタフェース)
DOMで扱えるデータ型には、以下のようなものがあります。
・Document
・Node
・Element
・NodeList
・Attr
・NamedNodeMap
詳しくは以下の記事を参考にしてください。
https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model/Introduction#basic_data_types
3. DOMでできること① 要素の取得
.jpg)
DOMでできることの1つ目は、要素の取得です。
要素の取得方法には、以下のようなものがあります。
・document.getElementByID()メソッド
・document.getElementByTagName()メソッド
・document.getElementByClassName()メソッド
1つずつ詳しく解説していきます。
3-1. document.getElementByID()メソッド
document.getElementByID()メソッドは、指定された文字列と一致するid名を持つHTML要素を返します。
一致する要素がない場合は、「null」を返します。
【例：test.js】
このコードは、id名が「test」であるHTML要素を返します。
一致する要素がない場合は、「null」を返します。
【例：test.js】
const elm = document.getElementById("test");このコードは、id名が「test」であるHTML要素を返します。
3-2. document.getElementByTagName()メソッド
document.getElementByTagName()メソッドは、指定された文字列と一致するタグ名を持つ「すべての」HTML要素を返します。
【例：test.js】
このコードは、タグ名が「h2」であるHTML要素をすべて返します。
【例：test.js】
const elm = document.getElementByTagName("h2");このコードは、タグ名が「h2」であるHTML要素をすべて返します。
3-3. document.getElementByClassName()メソッド
document.getElementByClassName()メソッドは、指定された文字列と一致するクラス名を持つ「すべての」HTML要素を返します。
【例：test.js】
このコードは、クラス名が「sample」であるHTML要素をすべて返します。
【例：test.js】
const elm = document.getElementClassName("sample");このコードは、クラス名が「sample」であるHTML要素をすべて返します。
4. DOMでできること② 要素の変更
.jpg)
DOMでできることの2つ目は、要素の変更です。
要素の変更方法には、以下のようなものがあります。
・element.innerHTMLプロパティ
・element.attributeプロパティ
・element.style.propertyプロパティ
1つずつ詳しく解説していきます。
4-1. element.innerHTMLプロパティ
element.innerHTMLプロパティは、HTML要素の内容を変更します。
【例：test.js】
このコードは、getElementByIdで取得した要素の内容を「新しいテキスト」という文字に変更しています。
【例：test.js】
document.getElementById("test").innerHTML = "新しいテキスト";このコードは、getElementByIdで取得した要素の内容を「新しいテキスト」という文字に変更しています。
4-2. element.attributeプロパティ
element.attributeプロパティは、HTML属性の値を変更します。
【例：test.js】
このコードは、getElementByIdで取得した要素のsrc属性を「myDog.jpg」に変更しています。
【例：test.js】
document.getElementById("myImg").src = "myDog.jpg";このコードは、getElementByIdで取得した要素のsrc属性を「myDog.jpg」に変更しています。
4-3. element.style.propertyプロパティ
element.style.propertyプロパティは、HTML要素のスタイルを変更します。
【例：test.js】
このコードは、getElementByIdで取得した要素のcolorを「red」に変更しています。
【例：test.js】
document.getElementById("test").style.color = "red";このコードは、getElementByIdで取得した要素のcolorを「red」に変更しています。
5. DOMでできること③ 要素の追加と削除
.jpg)
DOMでできることの3つ目は、要素の追加と削除です。
要素の追加と削除の方法には、以下のようなものがあります。
・document.createElement()メソッド
・document.appendChild()メソッド
・document.removeChild()メソッド
1つずつ詳しく解説していきます。
5-1. document.createElement()メソッド
document.createElement()メソッドは、新しく要素を作成します。
【例：test.html】
【例：test.js】
このコードは、以下のような処理をおこなっています。
1.新しいp要素を作成する
2.作成したp要素の中身(テキストノード)を作成する
3.2で作成したテキストノードを、1で作成したp要素に追加する
4.3で新しく追加されたp要素とテキストノードを、div1に追加する
【例：test.html】
<div id="div1">
<p id="p1">これはpタグ1です。</p>
<p id="p2">これはpタグ2です。</p>
</div>【例：test.js】
const p3 = document.createElement("p");
const node = document.createTextNode("これはあたらしいpタグです。");
p3.appendChild(node);
const elm = document.getElementById("div1");
elm.appendChild(p3);このコードは、以下のような処理をおこなっています。
1.新しいp要素を作成する
2.作成したp要素の中身(テキストノード)を作成する
3.2で作成したテキストノードを、1で作成したp要素に追加する
4.3で新しく追加されたp要素とテキストノードを、div1に追加する
5-2. document.appendChild()メソッド
document.appendChild()メソッドは、新しい要素を親の最後の子として追加します。
詳しくは、document.createElement()メソッドの例を見てください。
5-3. document.removeChild()メソッド
document.removeChild()メソッドは、HTML要素を削除します。
【例：test.js】
このコードは、、getElementByIdで取得した要素を削除しています。
【例：test.js】
const elm = document.getElementById("p1");
elm.remove();このコードは、、getElementByIdで取得した要素を削除しています。
6. おわりに
今回は、DOMの基礎について詳しく解説しました。
DOMには便利なメソッドやプロパティがまだまだたくさんあります！
気になった方はぜひ、参考記事を読んだり、ご自身で調べてみたりしてください。
参考記事
https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model