HTML DOM ドキュメント・オブジェクトは、Web ページ内の他のすべてのオブジェクトの所有者です。
ドキュメント・オブジェクトは Web ページを表します。
HTML ページの要素にアクセスするには、まずドキュメント・オブジェクトにアクセスすることから始めます。
HTML にアクセスして操作するため、ドキュメント・オブジェクトを使用する方法の例を以下に示します。
| メソッド | 説明 |
|---|---|
| document.getElementById(id) | 要素 id で要素を検索する |
| document.getElementsByTagName(name) | タグ名で要素を検索する |
| document.getElementsByClassName(name) | クラス名で要素を検索する |
| メソッド | 説明 |
|---|---|
| element.innerHTML = new html content | 要素内部の HTML を変更する |
| element.attribute = new value | HTML 要素の属性値を変更する |
| element.setAttribute(attribute, value) | HTML 要素の属性値を変更する |
| element.style.property = new style | HTML 要素のスタイルを変更する |
| メソッド | 説明 |
|---|---|
| document.createElement(element) | HTML 要素を作成する |
| document.removeChild(element) | HTML 要素を削除する |
| document.appendChild(element) | HTML 要素を追加する |
| document.replaceChild(element) | HTML 要素を置き換える |
| document.write(text) | HTML 出力ストリームに書く |
| メソッド | 説明 |
|---|---|
| document.getElementById(id).onclick = function(){コード} | イベントハンドラ・コードを onclick イベントに追加する |
最初の HTML DOM Level 1（1998）は、11 の HTML オブジェクト、オブジェクトコレクション、およびプロパティを定義しましたが、 これらは HTML5 でも有効です。
その後、HTML DOM Level 3 では、より多くのオブジェクト、コレクション、およびプロパティが追加されました。
| プロパティ | 説明 | DOM |
|---|---|---|
| document.anchors | name 属性を持つ全ての <a> 要素を返す that have a name attribute | 1 |
| document.applets | 全ての <applet> 要素を返す （HTML5 では非推奨） | 1 |
| document.baseURI | 文書のの絶対ベース URI を返す | 3 |
| document.body | <body> 要素を返す | 1 |
| document.cookie | 文書の cookie を返す | 1 |
| document.doctype | 文書の doctype を返す | 3 |
| document.documentElement | <html> 要素を返す | 3 |
| document.documentMode | ブラウザで使用しているモードを返す | 3 |
| document.documentURI | 文書の URI を返す | 3 |
| document.domain | 文書サーバのドメイン名を返す | 1 |
| document.domConfig | 廃止。 DOM の設定を返す | 3 |
| document.embeds | 全ての <embed> 要素を返す | 3 |
| document.forms | 全ての <form> 要素を返す | 1 |
| document.head | <head> 要素を返す | 3 |
| document.images | 全ての <img> 要素を返す | 1 |
| document.implementation | DOM の実装を返す | 3 |
| document.inputEncoding | 文書のエンコーディング（文字セット）を返す | 3 |
| document.lastModified | 文書が更新された日時を返す | 3 |
| document.links | href属性を持つ全ての <area> と <a> 要素を返す | 1 |
| document.readyState | 文書の（ローディング）ステータスを返す | 3 |
| document.referrer | リファラー（リンク文書）のURIを返す | 1 |
| document.scripts | 全ての <script> 要素を返す | 3 |
| document.strictErrorChecking | エラーチェックが強制された場合に返す | 3 |
| document.title | <title> 要素を返す | 1 |
| document.URL | 文書の完全な URL を返す | 1 |