JavaScript レッスン3
DOM操作
JavaScriptでHTMLを動的に操作する方法を学ぼう
DOMとは
DOM（Document Object Model）は、HTMLをJavaScriptから操作するためのインターフェースです。 ブラウザはHTMLを読み込むとDOMツリーを構築し、JavaScriptはこのツリーを通じて要素の取得・変更・追加・削除ができます。
要素の取得方法
DOM操作の第一歩は、操作したい要素を取得することです：
document.querySelector("セレクタ")- CSSセレクタで最初の1つを取得document.querySelectorAll("セレクタ")- 該当する全要素を取得document.getElementById("id")- IDで要素を1つ取得
要素の取得と内容の変更
Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.html
preview.local
Live PreviewclassList でスタイルを切り替え
classList を使うと、CSSクラスの追加・削除・切り替えができます。
Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.html
preview.local
Live Preview要素の作成と追加
createElement と appendChild で新しい要素を動的に追加できます。
Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.html
preview.local
Live Preview実践: カウンターアプリ
学んだDOM操作を組み合わせて、インタラクティブなカウンターを作ってみましょう。
Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.html
preview.local
Live Previewまとめ
querySelector/getElementByIdで要素を取得するtextContentでテキストを変更、innerHTMLでHTMLごと変更classList.add/remove/toggleでCSSクラスを操作するcreateElement+appendChildで新しい要素を追加するremoveChildで要素を削除する- DOM操作は、HTML/CSS/JSの知識を組み合わせてインタラクティブなWebページを作る基本技術