![MARKLEAPS[マークリープス]](https://markleaps.com/blog/wp-content/themes/mkl/images/00_logo.png){kind=logo}
JavaScriptでWebページに動きをつけるためには、まずHTMLの要素を取得して操作できるようになる必要があります。
その仕組みを支えているのが DOM（Document Object Model） です。
DOMとは？
DOM（Document Object Model）とは、HTMLをJavaScriptから操作できる形に変換した仕組みのことです。
JavaScriptは、このDOMを通して
- 要素を取得する
- 内容を書き換える
- 新しい要素を追加する
といった処理を行います。
DOMは、JavaScriptとHTMLをつなぐ橋のような存在 です。
HTML要素を取得してみよう（querySelector）
DOM操作の第一歩は、「どの要素に対して処理をするのか」 を決めることです。
そのときに使うのが querySelector です。
|
1 |
document.querySelector('セレクタ'); |
CSSと同じ書き方で、目的のHTML要素を取得できます。
IDで取得する
・HTML
|
1 |
<p id="title">こんにちは</p> |
・JavaScript
|
1 |
const idEl = document.querySelector('#title'); |
# を付けると、IDを指定できます。
クラスで取得する
・HTML
|
1 |
<p class="text">こんにちは</p> |
・JavaScript
|
1 |
const classEl = document.querySelector('.text'); |
. を付けると、クラスを指定できます。
デモで確認してみましょう。
See the Pen [JS] querySelectorでID・クラスを取得するデモ by mkl may (@mkl-may) on CodePen.
上記のデモでは、
#title で指定した要素と、
.text で指定した要素の文字を書き換えています。
どのセレクタを使うかによって、操作する対象が変わることが分かります。
タグで取得する
|
1 |
const tagEl = document.querySelector('p'); |
タグ名を指定した場合、ページ内で最初に見つかった要素 が取得されます。
デモで確認してみましょう。
See the Pen [JS] querySelectorでタグ指定すると最初の要素が取得されるデモ by mkl may (@mkl-may) on CodePen.
※「タグで取得」の処理は、一番上の <p> に適用されます。
そのため、2つ目と3つ目の <p> は変更されません。
取得した要素の中身を変更する（textContent）
取得した要素は、中に表示されている文字を書き換えることができます。
・HTML
|
1 |
<p id="msg">こんにちは</p> |
・JavaScript
|
1 2 |
const msg = document.querySelector('#msg'); msg.textContent = 'こんばんは'; |
画面に表示される内容が変更されます。
See the Pen [JS] textContentで文字を書き換えるデモ by mkl may (@mkl-may) on CodePen.
これが DOM操作の最も基本となる使い方 です。
HTMLを変更する（innerHTML）
文字だけでなく、HTMLそのものを入れ替えることも可能です。
|
1 |
msg.innerHTML = '<strong>こんばんは</strong>'; |
See the Pen [JS] innerHTMLでHTMLを書き換えるデモ by mkl may (@mkl-may) on CodePen.
タグを含めた変更ができます。
ただし、複雑な操作やセキュリティの観点から通常は textContent の利用が推奨 されます。
よくあるエラーと注意点
要素が取得できない
|
1 |
const el = document.querySelector('#notfound'); |
対象が存在しない場合、null になります。
そのまま操作するとエラーになるため注意が必要です。
JavaScriptの読み込みタイミング
HTMLより先にJavaScriptが実行されると、まだ要素が存在せず取得できないことがあります。
その場合は、
- bodyの最後で読み込む
- DOMContentLoaded を使う
などの対策を行います。
まとめ
DOMを理解すると、JavaScriptからHTMLを自由に操作できるようになります。
まずは次の2つを覚えましょう。
- querySelectorで要素を取得
- textContentで文字を変更
これができれば、クリックや入力に反応する処理へ進む準備が整います。