HTML DOM Document ドキュメントオブジェクト

HTML DOM Document オブジェクト - 詳細解説

この文章では、JavaScriptにおけるHTML DOM Documentオブジェクトについて掘り下げ、そのプロパティ、メソッド、HTMLドキュメントの様々な側面へのアクセスと操作方法について解説します。これにより、Webページの動的なインタラクションの中核となる技術を容易に習得することができます。

1. Documentオブジェクトの概要

定義: HTML DOM Documentオブジェクトは、HTMLドキュメント全体を表すものであり、ドキュメントのルートノードです。これを通じて、HTMLドキュメントのすべての要素にアクセスすることができます。

役割: HTMLドキュメントを操作するためのプロパティとメソッドを提供します。例えば、以下のようなものがあります。

ドキュメント情報の取得（タイトル、URL、エンコーディングなど）
新しいHTML要素の作成
HTML要素の検索と選択
HTML要素の追加、削除、変更

2. Documentオブジェクトの常用プロパティ

プロパティ	説明
`document.title`	現在のドキュメントのタイトルを取得または設定します。
`document.URL`	現在のドキュメントのURLを取得します。
`document.documentElement`	ドキュメントのルート要素（）を返します。
`document.head`	ドキュメントのヘッダー（）を返します。
`document.body`	ドキュメントの本文（）を返します。

3. Documentオブジェクトの常用メソッド

HTML要素の検索:

document.getElementById(id) : 要素のidを通じて要素を取得します。
document.getElementsByTagName(tagname) : タグ名を通じて要素の集合を取得します。
document.getElementsByClassName(classname) : クラス名を通じて要素の集合を取得します。
document.querySelector(selector) : CSSセレクタを通じて最初に一致する要素を取得します。
document.querySelectorAll(selector) : CSSセレクタを通じて一致するすべての要素の集合を取得します。

HTML要素の作成:

document.createElement(element) : 新しいHTML要素を作成します。
document.createTextNode(text) : 新しいテキストノードを作成します。

HTML要素の操作:

element.appendChild(child) : 子ノードを親ノードの末尾に追加します。
element.insertBefore(new, existing) : 指定した子ノードの前に新しい子ノードを挿入します。
element.removeChild(child) : 指定した子ノードを削除します。
element.replaceChild(new, old) : 新しい子ノードで古い子ノードを置き換えます。

4. Documentオブジェクトのイベント

document.addEventListener(event, function, useCapture) : ドキュメントにイベントリスナーを追加します。
常用イベントタイプ:

DOMContentLoaded : DOMが完全にロードされ解析された後に発火します。
load : ページが完全にロードされた後に発火します（画像などのリソースを含む）。

5. Documentオブジェクトの実際の応用

ページコンテンツの動的変更、例えば、テキストの更新、要素の追加/削除など。
ユーザーインタラクションへの応答、例えば、クリックイベント、マウス移動イベントなど。
フォームデータの操作、例えば、フォーム値の取得、フォームの送信など。

6. まとめ

HTML DOM Documentオブジェクトを使いこなせるようになれば、Webページの動的インタラクション開発の基礎を習得したことになります。提供されているプロパティやメソッドを学ぶことで、HTMLドキュメントの様々な部分を自由に操作し、多彩なWebページの機能を実現することができます。

サンプルコード


<!DOCTYPE html>
<html>
<head>
<title>Documentオブジェクトの例</title>
</head>
<body>

<h1 id="myHeading">こんにちは</h1>
<button id="myButton">クリック</button>

<script>
// 要素の取得
const heading = document.getElementById('myHeading');
const button = document.getElementById('myButton');

// イベントリスナーの追加
button.addEventListener('click', () => {
  // テキストの変更
  heading.textContent = 'クリックされました！';
});
</script>

</body>
</html>

参考文献

Document - Web API | MDN

Q&A

Q: document.getElementById と document.querySelector の違いは何ですか？
A: document.getElementById は ID で要素を検索しますが、 document.querySelector は CSS セレクタを使用して要素を検索します。 document.getElementById の方が高速ですが、 document.querySelector はより柔軟です。
Q: DOMContentLoaded イベントと load イベントの違いは何ですか？
A: DOMContentLoaded イベントは DOM が完全にロードされ解析された後に発火しますが、 load イベントはページが完全にロードされた後に発火します。画像などのリソースのロードを待つ必要がある場合は、 load イベントを使用します。
Q: Documentオブジェクトを使用して、どのように新しい要素をページに追加できますか？
A: まず、document.createElement() を使用して新しい要素を作成します。次に、element.appendChild() などのメソッドを使用して、既存の要素の子としてページに追加します。