JavaScript 入門 | ドキュメントオブジェクトモデル | Document オブジェクト
Document オブジェクト
Document オブジェクトは Web ページそのものを意味する。 Web ページに存在する HTML 要素へアクセスしたい場合は、必ず Document オブジェクトから始める必要がある。
Document メソッド
Document オブジェクトは、HTML 要素に関連する作業を支援するさまざまなメソッドを提供する。
- HTML 要素の選択
- HTML 要素の作成
- HTML イベントハンドラーの追加
- HTML オブジェクトの選択
HTML 要素の選択
HTML 要素を選択するために提供されるメソッドは次のとおりである。
| メソッド | 説明 |
|---|---|
| document.getElementsByTagName(タグ名) | そのタグ名の要素をすべて選択する。 |
| document.getElementById(アイディー) | そのアイディーの要素を選択する。 |
| document.getElementsByClassName(クラス名) | そのクラスに属する要素をすべて選択する。 |
| document.getElementByName(name 属性値) | その name 属性値を持つ要素をすべて選択する。 |
| document.querySelectorAll(セレクター) | そのセレクターで選択される要素をすべて選択する。 |
このうち document.querySelectorAll() メソッドは、ブラウザーによってサポート状況が異なる。 document.querySelectorAll() メソッドをサポートする主な Web ブラウザーのバージョンは次のとおりである。
| メソッド | ie | chrome | firefox | safari | opera |
|---|---|---|---|---|---|
| document.querySelectorAll() | 9.0 | 1.0 | 3.5 | 3.2 | 10.0 |
HTML 要素の作成
新しい HTML 要素を作成するために提供されるメソッドは次のとおりである。
| メソッド | 説明 |
|---|---|
| document.createElement(HTML 要素) | 指定された HTML 要素を作成する。 |
| document.write(テキスト) | HTML 出力ストリームを通じてテキストを出力する。 |
HTML イベントハンドラーの追加
HTML 要素にイベントハンドラーを追加するために提供されるメソッドは次のとおりである。
| メソッド | 説明 |
|---|---|
| document.getElementById(アイディー).onclick = function(){ 実行するコード } | マウスクリックイベントに接続されるイベントハンドラーコードを追加する。 |
HTML オブジェクトの選択
HTML DOM Level 1 は2017年に定義され、HTML5 でも引き続き使用されている。 その後、2004年には HTML DOM Level 3 が新しく定義され、Level 1 とともに使用されている。
このような HTML DOM が提供するオブジェクトコレクションを利用すると、HTML オブジェクトを簡単に選択できる。
| オブジェクトコレクション | 説明 | DOM Level |
|---|---|---|
| document.anchors | name 属性を持つ <a> 要素をすべて返す。 | 1 |
| document.applets | applet 要素をすべて返す。 (HTML5 から除外) | 1 |
| document.body | <body> 要素を返す。 | 1 |
| document.cookie | HTML 文書の cookie を返す。 | 1 |
| document.domain | HTML 文書が配置されているサーバーのドメイン名を返す。 | 1 |
| document.forms | <form> 要素をすべて返す。 | 1 |
| document.images | <img> 要素をすべて返す。 | 1 |
| document.links | href 属性を持つ <area> 要素と <a> 要素をすべて返す。 | 1 |
| document.referrer | リンクされている文書の URI を返す。 | 1 |
| document.title | <title> 要素を返す。 | 1 |
| document.URL | HTML 文書の完全な URL アドレスを返す。 | 1 |
| document.baseURI | HTML 文書の絶対ベース URI を返す。 | 3 |
| document.doctype | HTML 文書の文書型を返す。 | 3 |
| document.documentElement | <html> 要素を返す。 | 3 |
| document.documentMode | Web ブラウザーが使用しているモードを返す。 | 3 |
| document.documentURI | HTML 文書の URI を返す。 | 3 |
| document.domConfig | HTML DOM 設定を返す。 (現在は使用しない) | 3 |
| document.embeds | <embed> 要素をすべて返す。 | 3 |
| document.head | <head> 要素を返す。 | 3 |
| document.implementation | HTML DOM 実装を返す。 | 3 |
| document.inputEncoding | HTML 文書の文字エンコーディング形式を返す。 | 3 |
| document.lastModified | HTML 文書の最終更新日時を返す。 | 3 |
| document.readyState | HTML 文書の読み込み状態を返す。 | 3 |
| document.scripts | <script> 要素をすべて返す。 | 3 |
| document.strictErrorChecking | エラーの厳格な検査が有効かどうかを返す。 | 3 |