DOM方式とは？

DOM方式とは何ですか？

DOM方式とは？

ドキュメントオブジェクトモデル (Document Object Model, DOM) は、ウェブページを表す HTML のような文書の構造をメモリー内に表現することで、ウェブページとスクリプトやプログラミング言語を接続するものです。言い換えれば、DOMはウェブページをツリー構造で表現し、そのツリー構造内の各要素にアクセス、変更、削除などを行うためのAPIを提供します。

DOMの仕組み

ブラウザはHTML文書を読み込むと、それを解析してDOMツリーを作成します。DOMツリーは、文書内の各要素をノードとして表現し、要素間の親子関係、兄弟関係などを保持します。例えば、以下のようなHTML文書があったとします。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>DOMの例</title>
</head>
<body>
  <h1>見出し</h1>
  <p>これは段落です。</p>
</body>
</html>

このHTML文書に対するDOMツリーは以下のようになります。

ノードタイプ	ノード名	内容
Document	#document	(ルートノード)
Element	html
Element	head
Element	meta
Element	title	DOMの例
Element	body
Element	h1	見出し
Element	p	これは段落です。

DOM API を使用すると、このツリー構造を操作できます。たとえば、JavaScript を使用して以下を実行できます。

* 特定の要素を取得する（例：id が "myElement" の要素を取得） * 要素の内容を変更する（例：段落のテキストを変更） * 要素のスタイルを変更する（例：要素の背景色を変更） * 新しい要素を作成してツリーに追加する * 既存の要素をツリーから削除する

DOMの利点

DOM を使用すると、以下のような利点があります。 * **動的なウェブページを作成できる**: DOM を使用すると、JavaScript などを使用してウェブページの内容を動的に変更できます。これにより、ユーザーの操作やその他のイベントに応答して変化するインタラクティブなウェブページを作成できます。 * **ウェブページのアクセシビリティとSEOを向上させる**: DOM を使用して、スクリーンリーダーなどの支援技術が理解しやすいようにウェブページの構造を明確にすることができます。また、検索エンジンがウェブページの内容を理解しやすくすることで、SEO を向上させることもできます。 * **様々なプログラミング言語で操作できる**: DOM は言語に依存しない仕様であるため、JavaScript だけでなく、Python や Ruby などの他のプログラミング言語からも操作できます。

DOMの例

以下は、DOM を使用してウェブページを操作する簡単な例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>DOMの例</title>
</head>
<body>
  <h1 id="myHeading">見出し</h1>
  <button onclick="changeHeading()">見出しを変更</button>

  <script>
    function changeHeading() {
      document.getElementById("myHeading").innerHTML = "新しい見出し";
    }
  </script>
</body>
</html>

この例では、「見出しを変更」ボタンをクリックすると、見出しのテキストが「新しい見出し」に変わります。

参考文献

* Document Object Model (DOM) - MDN Web Docs * Document Object Model (DOM) - W3C

DOMの仕組み

DOMの利点

DOMの例

参考文献

関連QA

Q: DOM操作はどのような場合に使うべきですか？

Q: DOM操作のデメリットはありますか？

Q: DOM操作を行う上での注意点はありますか？