HTML DOMドキュメントオブジェクトは、Webページ内の他のすべてのオブジェクトの所有者です。
HTML DOMドキュメントオブジェクト
ドキュメントオブジェクトは、あなたのWebページを表します。
HTMLページ内の任意の要素にアクセスする場合は、必ずドキュメントオブジェクトへのアクセスに開始します。
以下は、HTMLにアクセスして操作するためにドキュメントオブジェクトを使用する方法の例をいくつか示します。
HTML要素を見つけます
| 方法 | 説明 |
|---|---|
| document.getElementById( id ) | 要素IDによって要素を検索 |
| document.getElementsByTagName( name ) | タグ名で要素を探します |
| document.getElementsByClassName( name ) | クラス名で要素を探します |
HTML要素を変更します
| 方法 | 説明 |
|---|---|
| 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(){ code } | イベントハンドラのコードを追加するonclickイベント |
HTMLのオブジェクトの検索
最初のHTML DOMレベル1（1998）は、11 HTMLオブジェクト、オブジェクトコレクション、およびプロパティを定義しました。 これらは、HTML5にも有効です。
その後、HTML DOMレベル3に、より多くのオブジェクト、コレクション、およびプロパティが追加されました。
| プロパティ | 説明 | DOM |
|---|---|---|
| document.anchors | すべて返し<a> name属性を持つ要素を | 1 |
| document.applets | すべてのリターン<applet>要素は（HTML5では非推奨） | 1 |
| document.baseURI | 文書の絶対ベースURIを返します。 | 3 |
| document.body | 返し<body>要素を | 1 |
| document.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 | 戻り値すべての<area>と<a> href属性を持つ要素 | 1 |
| document.readyState | ドキュメントの（ロード）状態を返します | 3 |
| document.referrer | 返しリファラのURI（リンク文書） | 1 |
| document.scripts | 戻り値すべて<script>要素 | 3 |
| document.strictErrorChecking | エラーチェックが実施されている場合は戻り値 | 3 |
| document.title | 返し<title>要素を | 1 |
| document.URL | ドキュメントの完全なURLを返します。 | 1 |