前の記事では、
DOMとは何か、なぜJavaScriptでHTMLを操作できるのか
という 仕組みの部分 を理解しました。
次に必要なのは、
実際にDOMを扱う方法 です。
・どの要素を対象にするのか
・どうやって取得するのか
・取得したあと、何ができるのか
この記事では、
DOM操作の基本的な流れと考え方 を整理します。
この記事で学べること
・DOM操作の基本ステップ
・要素を取得するという考え方
・取得した要素で何ができるか
・DOM操作で最初につまずかないための視点
DOM操作の基本ステップ
DOM操作は、
必ず次の流れで行われます。
操作したい要素を決める
JavaScriptでその要素を取得する
取得した要素を操作する
この3ステップは、
今後どんな処理でも共通です。
「要素を取得する」とは何か
要素を取得するとは、
HTML上の特定の要素をJavaScriptで参照できる状態にする
という意味です。
取得できて初めて、
・内容を変える
・表示を切り替える
・イベントを設定する
といった操作が可能になります。
取得方法はいくつもあるが、考え方は同じ
DOMの取得方法はいくつかありますが、
大切なのは 方法を暗記することではありません。
重要なのは、
・どの要素を対象にしたいか
・それを一意に特定できるか
この2点です。
要素を特定するための情報
DOMを取得する際、
主に次の情報を使って要素を特定します。
・id
・class
・タグ名
・HTML構造
HTML側で
「どんな目印を付けているか」
が非常に重要になります。
idで要素を取得する考え方
idは、
ページ内で一意 という特徴があります。
そのため、
・1つだけ確実に取得したい
・対象が明確
という場合に使われます。
idが付いている要素は、
「この1つ」と断定できるのが強みです。
classで要素を取得する考え方
classは、
複数の要素に付けられる という特徴があります。
そのため、
・同じ処理を複数要素にしたい
・デザインと連動させたい
といった場面で使われます。
取得結果が
「複数になる可能性がある」
という点を意識することが重要です。
タグ名で取得する考え方
タグ名での取得は、
HTML構造そのものを対象にする方法です。
・すべてのpタグ
・すべてのliタグ
といったように、
範囲が広くなる傾向があります。
学習初期では、
「こういう指定もできる」
程度の理解で問題ありません。
取得できたかどうかが最重要
DOM操作で最も多いエラーは、
そもそも取得できていない ことです。
・指定が間違っている
・HTML構造と合っていない
・まだDOMが読み込まれていない
取得できていない状態で操作すると、
エラーや何も起きない原因になります。
取得した要素でできること
要素を取得できると、
次のような操作が可能になります。
・テキストを変更する
・HTMLの内容を入れ替える
・classを付け外しする
・スタイルを変更する
これらはすべて、
DOMを操作している結果です。
表示・非表示が切り替えられる理由
JavaScriptで要素を取得し、
その状態を変更することで、
・見える
・見えない
を切り替えられます。
これは、
DOMの状態が変わることで
CSSの適用結果が変わるためです。
DOM操作は「画面操作」ではない
ここで重要な考え方です。
JavaScriptは、
・画面を直接操作している
・見た目を直接いじっている
わけではありません。
DOMというデータ構造を操作している結果、
画面が変わっている
という理解が正確です。
初心者が最初につまずくポイント
DOM操作で、
よくあるつまずきポイントを整理します。
・取得対象がズレている
・複数要素なのに1つとして扱っている
・HTML構造を把握していない
DOMは、
HTML構造を理解していないと扱えない
という点を忘れないでください。
DOM操作はCSS理解と直結する
DOM操作では、
・classを付ける
・classを外す
といった操作が頻繁に出てきます。
これは、
CSSの理解があると一気に楽になります。
HTML / CSS / JavaScript は、
常にセットで考えることが重要です。
まとめ
DOM操作の基本は、
次の3ステップに集約されます。
操作したい要素を決める
JavaScriptで取得する
取得した要素を操作する
この流れを意識できれば、
DOM操作は怖くありません。
次は、
ユーザーの操作に反応する仕組み
であるイベント処理に進みます。
次に読むべき記事
▶ 次の記事
5-5 イベント処理の基本（click / change）
▶ 関連記事
5-3 DOMとは何か｜JavaScriptがHTMLを操作する仕組み
コメント