JavaScriptができることを一通りまとめてきましたが、
JavaScript自身ではない新しい単元としてDOMというものについて学んだので、
まとめていこうと思います。
DOMとは？
MDN 参照：
ドキュメントオブジェクトモデル (Document Object Model, DOM) は、ウェブページを表す HTML のような文書の構造をメモリー内に表現することで、ウェブページとスクリプトやプログラミング言語を接続するものです。ふつうは JavaScript を使用しますが、HTML、SVG、XML などの文書をオブジェクトとしてモデリングすることはコア JavaScript 言語の一部ではありません。
簡単に説明すると、
HTMLの要素をJavaScriptで操作する仕組みのこと
になります。
例えば、
・ボタンを押したら、ボタンそのもののデザインが変化する。
・ページをスクロールすると広告のバナーが表示される。
・ボタンをクリックしたらドロップダウンが出現する。
など、HTMLやCSSの特定の要素に対して特定の操作を行うことができるようになります。
それでは、具体的にどのように操作をするかについてみていきたいと思います。
目次：
- 1.documentオブジェクト
- 2.documentオブジェクトのメソッド「要素の取得」
- 3.documentオブジェクトのメソッド「要素の操作」
- 4.documentオブジェクトのメソッド「要素の作成」
- 5.documentオブジェクトのメソッド「要素の削除」
1. documentオブジェクト
documentオブジェクトが、DOMの世界の入り口になっています。
webページのあらゆるコンテンツを表していて、便利なプロパティやメソッドも多数用意されています。
これがあるおかげで、クリックされた時にドロップダウンを出力させたり、ページの色を変化させたりと、ブラウザがページを読み込むときに、HTMLとCSSをもとにJavaScriptのオブジェクトが作られます。
2. documentオブジェクトのメソッド「要素の取得」
documentオブジェクトには、さまざまなメソッドがあります。
その中でも特に重要な、要素を取得するメソッドについてみていきましょう。
要素の取得とは？
・要素の取得とは
JavaScriptを使い、１つあるいは複数の要素を、要素の種類やCSSのクラスをもとに取ってくることです。
CSSのセレクターと似ています。
全ての要素にスタイルを当てるのではなく、特定の要素の色を変更したり、動作を追加したい場合にはその特定の要素をまずは選択する必要があります。
2-1. getElementById
getElementByIdはdocumentオブジェクトが持っていて、実行するときにstringを渡します。
そのstringの要素が、対象となる要素についているidの値を入力します。
対象の要素が、idの要素を持っていれば、その対象となる要素を返してくれ、なければnullを返します。
使用方法：
document.getElenetById("「取得したいid名」")
2-2. getElementsByTagName
getElementByIdと違い、一致する全ての要素を取得します。
対象となる要素のタグの名前を入力する。例：（"img"）、("p")など
HTMLコレクションを返してくれます。
使用方法：
document.getElenetsByTagName("「取得したいタグ名」")
2-3. getElementsByClassName
getElementByIdと違い、一致する全ての要素を取得します。
対象となる要素のクラスの名前を入力する。
HTMLコレクションを返してくれます。
使用方法：
document.getElenetsByClassName("「取得したいclass名」")
2-4. querySelector
上記３つのものと違い、柔軟に要素を取得することができます。
idやclass名、タグ名、属性などcssで使っていたセレクターを全て使用することができます。
使用方法：
document.querySelector("「取得したい要素名」")
| querySelector、querySelectorAllの使用例： | |
|---|---|
| タグ名を取得 | ("p")、("img")など |
| idセレクタの取得 | "#「取得したいid名」" |
| classセレクタの取得 | ".「取得したいclass名」" |
| 属性の取得 | 例："a [「指定名」 = "「指定名」"]" |
注意：querySelectorは、最初に見つけた要素１つを返します。
2-5. querySelectorAll
querySelector同様、取得することができます。
しかし、対象となる全ての要素を取得することができます。
3. documentオブジェクトのメソッド「要素の操作」
取得した要素に対して、スタイルを当てたり、要素を出力したり隠したりなど、
要素自身を操作します。
3-1. テキストを操作する
3-1-1. innerHTML
HTMLも含めて要素を取得することができます。
3-1-2. innerText
ページで見えているテキストのみを取得できます。
3-1-3. textContent
ページに見えていない隠れている要素も含めて全てのテキストが取得できます。
3-2. 属性を操作する
属性とは：
input要素 type属性、a要素 href 属性 idやclassなど
document.querySelector(#「id属性名」).id
document.querySelector("img").src
document.querySelector("a").href
など、属性名に.「ドット」をつけることにより、その属性を見ることができる。
また、＝「イコール」で繋げることで、属性の変更をすることもできます。
3-2-1. getAttribute メソッド
例：
getAttributeメソッドは、
取得した属性の中身を出力することができます。
const firstLink = document.querySelector("a");
firstLink.getAtttribute("href")
- document.querySelectorで a「アンカー要素」を取得して、firstLinkという変数に代入します。
- 代入した変数firstLinkに対して、getAttributeの("href")属性を指定すると、取得したa「アンカー要素」の中身のURLを確認できます。
"「取得したURLが表示されます。」"
3-2-2. setAttribute メソッド
取得した値に任意の出力を設定できます。
例：
const firstLink = document.querySelector("a");
firstLink.setAtttribute("href", "https://google.com")
- document.querySelectorで a「アンカー要素」を取得して、firstLinkという変数に代入します。
- 代入した変数firstLinkに対して、setAttributeの("href")属性を指定、,「カンマ」で区切り、変更するURLを指定します。
hrefの中身が、設定した「https : //google.com」の値に変更されます。
3-3. スタイルの操作
例：
h2要素にスタイルを適用するとします。
const h2 = document.querySelector("h2");
h2.classList.add(red);//クラスの追加(h2にredという色のクラスを追加できます。)
h2.classList.remove(red);//クラスの削除(h2にredというクラスを外すことができます。)
h2.classList.toggle(red);//クラスの取り外し(付ける場合は、true、外す場合は、falseを返します。
| classListプロパティの使用例： | |
|---|---|
| クラスを追加 | 要素名.(ドット)classList.(ドット).add(追加するクラス名) |
| クラスを削除 | 要素名.(ドット)classList.(ドット).remove(追加するクラス名) |
| クラスの取り外し | 要素名.(ドット)classList.(ドット).toggle(追加するクラス名) |
3-4. 対象の要素の親、子、兄弟要素を取得する。
| 対象の親、子、兄弟要素を取得する。： | |
|---|---|
| 親要素を取得する | 要素名.(ドット)parentElement |
| 子要素を取得する | 要素名.(ドット)children |
| 次の 兄弟要素を取得する | 要素名.(ドット)nextElementSibling |
| 前の 兄弟要素を取得する | 要素名.(ドット)previousElementSibling |
4. documentオブジェクトのメソッド「要素の作成」
DOMでは、HTMLに書かれていない要素を追加することもできます。
それが、createElementというメソッドになります。
このメソッドに作りたい要素のタグ名を入れることで、その要素のオブジェクトを作成することができます。
document.createElement("img");
img要素を作ることができました。
<img>
4-1. 作成したオブジェクトの操作
・例：作成したオブジェクトに画像URLを入れてみる
- 作成したimgオブジェクトを変数newImgに保存。
- newImgのsrcに対して任意の画像のURLを保存します。
const newImg = document.createElement("img");
newImg.src = "https://画像URL"
4-2. 作成したオブジェクトの配置
オブジェクトを作成したら、どうやって配置すればいいでしょう？
配置する場所により使用するメソッドが異なるので、複数紹介していきます。
4-2-1. appendChild
親要素に対して引数に追加する要素を指定することで、親要素内の末尾に追加します。
document.body.appendChild(newImg);
bodyに対して、newImg要素を、末尾に追加します。
body末端に、newImgの要素が追加されます。
4-2-2. append
選択した要素の末尾に直接文書を追加することができます。
const p = document.querySelector("p")
p.append("あいうえお");
- document.querySelector("p")で、段落要素を取得して、変数pに格納します。
- 取得した段落要素の末尾にappendで"あいうえお"と文章を末尾に出力させます。
あいうえお
4-2-3. prepend
選択した要素の初めに文章を追加します。
const p = document.querySelector("p")
p.prepend("あいうえお");
- document.querySelector("p")で、段落要素を取得して、変数pに格納します。
- 取得した段落要素の末尾にprependで"あいうえお"と文章を先頭に出力させます。
あいうえお
4-2-4. insertAdjacentElement
選択した要素の兄弟要素に追加する。
第一引数：挿入場所※下記表を参照
第二引数：挿入する要素名
const B = document.createElement("b");
B = append("あいうえお");
const h1 = document.querySelector("h1");
h1.insertAdjacentElement("下記の表の４種類より選択します。",B)
- document.createElement("b"); 要素、bタグの要素を新規作成
- B = append("あいうえお"); bタグの要素に文字列を挿入。
- const h1 = document.querySelector("h1"); 挿入する場所の要素、h1を取得。
- h1.insertAdjacentElement("下記の表の４種類より選択します。",B)
h1の兄弟要素に追加。
| insertAdjacentElement 挿入場所 第一引数 | |
|---|---|
| "beforebegin" | 自身の直前に挿入する。 |
| "afterbegin" | 最初の子ノードとして挿入する。 |
| "beforeend" | 最後の子ノードとして挿入する。 |
| "afterend" | 自身の直後に挿入する。 |
5. documentオブジェクトのメソッド「要素の削除」
要素の削除をする場合には、removeメソッドを使用します。
使用方法は、
- 要素の取得
- 要素の削除
の２工程をすることで、特定の要素を削除することができます。
例：
const img = document.querySelector("img")
img.remove()
指定したimgを削除することができます。
まとめ：
DOM操作には、4つの主な操作方法があります。
- 要素の取得
- 要素の操作
- 要素の作成
- 要素の削除
これらの操作方法を組み合わせることにより、HTMLやCSSにJavaScriptを使って操作をして、さまざまな動きを付け加えることができます。