DOM操作とは

DOM操作とは？

HTMLは本来「静的」な構造ですが、JavaScriptを使ってテキストの変更・画像の差し替え・要素の追加や削除など、
リアルタイムでWebページの見た目や内容を変化させることができます。

具体例

例えば、以下のようなHTMLとJavaScriptがあるとします。

HTML

<p id="text">こんにちは！</p>
<button onclick="changeText()">変更</button>

JavaScript

function changeText() {
  document.getElementById("text").textContent = "こんばんは！";
}

この例では、ボタンをクリックすると <p>タグの内容が「こんにちは！」から「こんばんは！」に変わります。

関連用語

用語	解説
DOM	Document Object Model。HTMLをツリー構造で扱う仕組み。
getElementById()	指定したIDの要素を取得するDOM操作の基本メソッド。
textContent	要素内のテキストを取得・書き換えるためのプロパティ。
querySelector()	CSSセレクタを使って要素を取得する方法。
createElement()	JavaScriptで新しいHTML要素を作成するメソッド。

まとめ

• DOM操作とは、HTMLをJavaScriptで動的に操作する技術
• 要素の取得・変更・追加・削除などが可能
• 実際にコードを書いて試すことで理解が深まる
• フロントエンド開発の基本として必須の知識