学ぶドキュメントオブジェクトモデル（DOM）とは何ですか？ | インタラクティブなWeb開発のためのDOM操作

メニューを表示するにはスワイプしてください

JavaScriptのクラスについて学んだところで、次は**Document Object Model（DOM）**に注目します。DOMはウェブページを操作するためのインターフェースです。次のセクションでは、JavaScriptがDOMとどのように連携して動的でインタラクティブなコンテンツを作成するかを解説します。

DOMは家系図のようなものです。ドキュメント内の各要素は家族の一員のように、親子や兄弟姉妹といった関係でつながっています。

DOMでは、要素、属性、テキストはノードと呼ばれ、これらのノードは家系図のように階層的に配置されています。あるノードは子を持つ親であり、またあるノードは兄弟姉妹同士です。

HTMLとDOMの関係

ブラウザがHTMLドキュメントを読み込むと、HTMLコードを解析して対応するDOMツリーを構築します。HTMLはウェブページの静的な構造を提供し、DOMはJavaScriptによって操作可能なライブで動的な表現です。

HTMLは、誰が誰とつながっているかという初期の家系図構造を定義しますが、それ自体は静的で自動的には変化しません。
DOMはリアルタイムの家系図であり、変更が可能です。新しいメンバー（要素）を追加・削除したり、親子や兄弟姉妹といった関係をJavaScriptで更新できます。

例えば：

<!DOCTYPE html>
<html>
  <head>
    <title>My Web Page</title>
  </head>
  <body>
    <h1>Welcome to My Website</h1>
    <p>This is a simple paragraph.</p>
  </body>
</html>

このHTMLは、親ノードである<html>と、その子ノードである<head>および<body>を持つ基本的な家系図を作成します。body内では、<h1>と<p>が兄弟ノードとなります。

この構造は、JavaScriptがノード（家族のメンバー）間の関係を操作できる、HTMLのライブでインタラクティブなDOMバージョンです。

JavaScriptによるDOMとの相互作用

JavaScriptはDOMにアクセスし、リアルタイムで家系図に変更を加えることができます。新しいメンバーの追加、既存メンバーの削除、情報の変更が可能です。

家族メンバーへのアクセス：家系図で特定の人物を探すのと同様に、JavaScriptはdocument.getElementById()やdocument.querySelector()などのメソッドを使ってDOM内の個々のノードにアクセスできます。
情報の変更：家族メンバーにアクセスした後、その詳細情報を更新できます。例えば、JavaScriptはinnerHTMLやtextContentなどのプロパティを使って要素のテキスト内容や属性を変更できます。
関係の修正：JavaScriptは家系図に新しいメンバーを追加したり、削除したりすることもできます。これはappendChild()やremoveChild()などのメソッドでDOM構造を操作することで実現します。

例

このHTMLを考えてみましょう:

<p id="greeting">Hello, World!</p>

JavaScriptを使うことで、家族のメンバーの名前を更新するように段落のテキストを変更できます:

// Access the family member (DOM element) using its ID
const greetingElement = document.getElementById('greeting');

// Modify the family member's details (DOM content)
greetingElement.textContent = 'Hello, JavaScript!';

JavaScriptコードを実行すると、家系図（DOM）が更新され、段落のテキストが「Hello, World!」から「Hello, JavaScript!」に変わります。

index.html

index.js

index.css

すべて明確でしたか？

フィードバックありがとうございます！

セクション 2. 章 1

AIに質問する

何でも質問するか、提案された質問の1つを試してチャットを始めてください

セクション 2. 章 1