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つ取得
要素の取得と内容の変更
Monaco + Shiki / Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.htmllazy
5 lines0 issues
Monaco Editor を準備しています
表示領域に入った時点で Monaco と Shiki を初期化します。
preview.local
Live PreviewConsole
console.log / warn / error の出力がここに表示されます。
classList でスタイルを切り替え
classList を使うと、CSSクラスの追加・削除・切り替えができます。
Monaco + Shiki / Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.htmllazy
5 lines0 issues
Monaco Editor を準備しています
表示領域に入った時点で Monaco と Shiki を初期化します。
preview.local
Live PreviewConsole
console.log / warn / error の出力がここに表示されます。
要素の作成と追加
createElement と appendChild で新しい要素を動的に追加できます。
Monaco + Shiki / Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.htmllazy
3 lines0 issues
Monaco Editor を準備しています
表示領域に入った時点で Monaco と Shiki を初期化します。
preview.local
Live PreviewConsole
console.log / warn / error の出力がここに表示されます。
実践: カウンターアプリ
学んだDOM操作を組み合わせて、インタラクティブなカウンターを作ってみましょう。
Monaco + Shiki / Tab でインデント / Ctrl(Cmd)+Enter で再実行
index.htmllazy
9 lines0 issues
Monaco Editor を準備しています
表示領域に入った時点で Monaco と Shiki を初期化します。
preview.local
Live PreviewConsole
console.log / warn / error の出力がここに表示されます。
まとめ
querySelector/getElementByIdで要素を取得するtextContentでテキストを変更、innerHTMLでHTMLごと変更classList.add/remove/toggleでCSSクラスを操作するcreateElement+appendChildで新しい要素を追加するremoveChildで要素を削除する- DOM操作は、HTML/CSS/JSの知識を組み合わせてインタラクティブなWebページを作る基本技術