HTML DOM API
1. Application Programming Interface (API)
DOM API（Application Programming Interface）は、JavaScriptがHTML要素のコンテンツ、構造、スタイルを変更できるようにするための、メソッド（Methods）とプロパティ（Properties）の集合体です。
- API メソッド：HTML要素に対して実行できるアクション。
- API プロパティ：HTML要素でアクセス可能な値。
2. コード例
以下のコードは、JavaScriptを使用してHTML要素にアクセスし、その内容を書き換える基本的な例です。
<html>
<body>
<p id="demo"></p>
<script>
// パラグラフ（段落）要素にアクセス
const myPara = document.getElementById("demo");
// 要素のコンテンツを変更
myPara.innerHTML = "こんにちは、世界！";
</script>
</body>
</html>3. コード例の解説
上記のサンプルコードで何が行われているかを分解して解説します。
documentは HTMLドキュメント 自体を指します。getElementById()は documentメソッド です。myPara = getElementById("demo")によって、"demo" というIDを持つ要素を取得しています。innerHTMLは 要素プロパティ（エレメントプロパティ） です。myPara.innerHTML = "こんにちは、世界！"によって、そのプロパティの値を書き換えています。
4. HTML DOM APIでできること
DOM APIを活用することで、開発者は以下の操作を行うことが可能になります。
- 要素の検索と選択
- 要素のコンテンツや属性（アトリビュート）の変更
- 要素の追加、削除、修正
- CSSスタイルの変更
- ユーザーの入力に反応するためのイベントリスナーの追加
5. 言語としてのJavaScript
DOM APIは、HTML DOM要素を取得、変更、追加、または削除する方法を定義した標準規格です。一方、JavaScriptはブラウザ内でこのAPIを通じてDOMにアクセスするために使用されるプログラミング言語です。
6. APIのメソッドとプロパティ
開発者は、APIへの入り口（エントリーポイント）として document や window といったグローバルオブジェクトを使用します。
HTMLページ内の要素にアクセスしたい場合は、常に document オブジェクトへのアクセスから開始します。この documentオブジェクト は、ブラウザに表示されているあなたのウェブページそのものを表現しています。
JavaScriptでHTMLを操作するには、まず要素を選択する必要があります。
7. HTML要素の選択
以下は、document オブジェクトを使用してHTMLにアクセスする方法の代表例です。
| メソッド | 説明 |
|---|---|
document.getElementById(id) | 要素のIDによって要素を検索する |
document.getElementsByTagName(name) | タグ名によって要素を検索する |
document.getElementsByClassName(name) | クラス名によって要素を検索する |
document.querySelector(selector) | 指定したCSSセレクターに一致する最初の要素を検索する |
document.querySelectorAll(selector) | 指定したCSSセレクターに一致するすべての要素を検索する |
document オブジェクトは、ウェブページ内の他のすべてのオブジェクトのオーナーです。
8. 要素コンテンツへのアクセス
要素の中身を操作するためのプロパティです。
| プロパティ | 説明 |
|---|---|
element.innerHTML | 要素内のHTMLコンテンツ |
element.textContent | 要素内のテキストコンテンツ |
9. 要素属性へのアクセス
要素が持つ属性やスタイルを操作します。
| プロパティ | 説明 |
|---|---|
element.attribute | HTML要素の属性値を変更する |
element.style.property | HTML要素のスタイル（CSS） |
10. 要素属性の変更
属性を動的に設定するためのメソッドです。
| メソッド | 説明 |
|---|---|
element.setAttribute() | 新しい属性を作成、または既存の属性値を設定する |
11. 構造の操作（マニピュレーション）
DOMツリーの構造自体を変化させるメソッドです。
| メソッド | 説明 |
|---|---|
document.createElement() | 新しいHTML要素を生成する |
document.removeChild() | HTML要素を削除する |
document.appendChild() | HTML要素を子要素として追加する |
document.replaceChild() | HTML要素を置換する |
12. イベントハンドラーの追加
ユーザーのアクションに反応するための設定です。
| メソッド | 説明 |
|---|---|
document.getElementById(id).onclick = function(){code} | onclickイベントにイベントハンドラーのコードを追加する |