目次
まとめ
-
DOM（Document Object Model=ドキュメントを物として扱うモデル）：プログラム（JavaScript）からHTMLやXMLを自由に操作するための仕組み、データ構造
DOMツリーという階層構造を定義しているものがDOMという仕組み - Node：DOMツリー（オブジェクトツリー）を構成する一つ一つの要素
- Element：Nodeの種類の一種（Element型Node）
詳細
DOM
-
プログラム（JavaScript）からHTMLやXMLを自由に操作するための仕組み、データ構造
JavaScriptからHTMLドキュメントに要素を追加したり、ボタンクリック時のイベントを登録したり、スタイルや属性を変更したり、要素のサイズや位置を取得したり、こういったものはすべてDOMのAPIを使うことで操作できる。 -
DOMツリー（オブジェクトツリー）という階層構造を定義しているものがDOMという仕組み
活用例1
JavaScriptを使用してDOMを操作し、HTML文書の内容を動的に変更します。
index.html
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM操作の例</title>
</head>
<body>
<h1 id="title">初期タイトル</h1>
<button id="changeButton">タイトルを変更</button>
<script src="script.js"></script>
</body>
</html>
main.js
document.addEventListener("DOMContentLoaded", function() {
// ボタンのクリックイベントを設定
document.getElementById("changeButton").addEventListener("click", function() {
// h1要素を取得
var titleElement = document.getElementById("title");
// h1要素のテキストを変更
titleElement.textContent = "変更されたタイトル";
});
});
解説
HTML
-
h1要素にIDを付与して特定の要素を簡単に取得できるようにしています（id="title"） -
button要素にもIDを付与して、JavaScriptからアクセスできるようにしています（id="changeButton"） -
scriptタグで外部JavaScriptファイルを読み込んでいます（src="script.js"）
JavaScript
-
DOMContentLoadedイベントを使って、HTMLが完全に読み込まれてからスクリプトが実行されるようにしています -
getElementByIdメソッドで、IDがchangeButtonのボタン要素を取得し、クリックイベントリスナーを追加しています - ボタンがクリックされると、IDが
titleのh1要素を取得し、そのtextContentを変更しています