初学者によるDOMについて覚書 #JavaScript

DOMとは

DOM（Document Object Model）はWebページを表現するための仕組みで、Webページの構造や要素、属性、イベントなどを扱うことができます。

DOMは、JavaScriptなどのスクリプト言語を使用して、Webページの要素にアクセスしたり、Webページのコンテンツを動的に変更したりするために使用されます。JavaScriptは、DOMを使用して、Webページの要素にアクセスし、変更することができます。

※Document Object Model（DOM）は、Webページを表現するための標準化された方法です。DOMは、HTML、XML、SVGなどのドキュメントを、階層的なツリー構造で表現します。このツリー構造は、Webページの要素、属性、テキスト、および他のコンテンツを表します。

例えば、以下のようなHTMLコードがあったとします。

<html>
<head>
	<title>DOMの例</title>
</head>
<body>
	<h1>DOMの例</h1>
	<p>DOMはWebページの要素を扱うための仕組みです。</p>
	<button id="myButton">ボタン</button>
</body>
</html>

このHTMLコードを解析すると、以下のようなDOMツリーが作成されます。

- document
	- html
		- head
			- title
				- テキストノード："DOMの例"
		- body
			- h1
				- テキストノード："DOMの例"
			- p
				- テキストノード："DOMはWebページの要素を扱うための仕組みです。"
			- button
				- テキストノード："ボタン"

このDOMツリーを使って、JavaScriptなどのスクリプト言語を使って、Webページの要素にアクセスし、操作することができます。

例えば、以下のようなJavaScriptコードを書くことで、ボタンをクリックした時にアラートダイアログを表示することができます。

// ボタン要素を取得する
var button = document.getElementById("myButton");

// ボタン要素にクリックイベントを追加する
button.addEventListener("click", function() {
    // アラートダイアログを表示する
    alert("ボタンがクリックされました！");
});

このように、DOMを使うことで、Webページの要素を動的に操作することができます。

DOMでよく使われるメソッドやプロパティ

DOMは、Webページの要素にアクセスするための多くの方法があります。
以下に、DOMでよく使われるメソッドやプロパティをいくつか紹介します。

getElementById()
このメソッドは、id属性が指定された要素を取得するために使用されます。例えば、上記の例で使用したように、ボタン要素を取得するために使用できます。

var button = document.getElementById("myButton");

querySelector()
このメソッドは、CSSセレクターを使用して、Webページ内の要素を取得するために使用されます。例えば、以下のように使用することができます。

// ボタン要素を取得する
var button = document.querySelector("button");

// クラス名が"myClass"である要素を取得する
var elements = document.querySelectorAll(".myClass");

innerHTML
このプロパティは、指定された要素のHTMLコードを取得または設定するために使用されます。例えば、以下のように使用することができます。


// ボタン要素のテキストを取得する
var buttonText = button.innerHTML;

// ボタン要素のテキストを変更する
button.innerHTML = "新しいボタン";

addEventListener()
このメソッドは、指定された要素にイベントリスナーを追加するために使用されます。例えば、以下のように使用することができます。


// ボタン要素にクリックイベントを追加する
button.addEventListener("click", function() {
    // クリックされた時に実行される処理
});

以上が、DOMの基本的な情報です。