JavaScript HTML DOM ドキュメント
HTML DOM ドキュメント オブジェクトは、Web ページ内の他のすべてのオブジェクトの所有者です。
HTML DOM ドキュメント オブジェクト
ドキュメント オブジェクトは Web ページを表します。
HTML ページの任意の要素にアクセスする場合は、常にドキュメント オブジェクトへのアクセスから始めます。
以下は、ドキュメント オブジェクトを使用して HTML にアクセスし、操作する方法の例です。
HTML 要素の検索
| 方法 | 説明 |
|---|---|
| document.getElementById(ID) | 要素 ID で要素を検索する |
| document.getElementsByTagName(名前) | タグ名で要素を検索 |
| document.getElementsByClassName(名前) | クラス名で要素を検索 |
HTML 要素の変更
| 財産 | 説明 |
|---|---|
| エレメント.innerHTML =新しい HTML コンテンツ | 要素の内部 HTML を変更する |
| エレメント.属性 = 新しい値 | HTML 要素の属性値を変更する |
| エレメント。スタイル。プロパティ = 新しいスタイル | HTML 要素のスタイルを変更する |
| 方法 | 説明 |
| エレメント.setAttribute(属性、値) | HTML 要素の属性値を変更する |
要素の追加と削除
| 方法 | 説明 |
|---|---|
| document.createElement(エレメント) | HTML 要素を作成する |
| document.removeChild(エレメント) | HTML 要素を削除する |
| document.appendChild(エレメント) | HTML 要素を追加する |
| document.replaceChild(新しい、古い) | HTML 要素を置き換える |
| ドキュメント.書き込み(文章) | HTML 出力ストリームに書き込む |
イベント ハンドラの追加
| 方法 | 説明 |
|---|---|
| document.getElementById(ID.onclick = 関数(){コード} | onclick イベントへのイベント ハンドラー コードの追加 |
HTML オブジェクトの検索
最初の HTML DOM レベル 1 (1998 年) では、11 の HTML オブジェクト、オブジェクト コレクション、およびプロパティが定義されました。これらは HTML5 でも有効です。
その後、HTML DOM レベル 3 で、さらに多くのオブジェクト、コレクション、およびプロパティが追加されました。
| 財産 | 説明 | ドム |
|---|---|---|
| ドキュメント.アンカー | name 属性を持つすべての <a> 要素を返します | 1 |
| ドキュメント.アプレット | 非推奨 | 1 |
| document.baseURI | ドキュメントの絶対ベース URI を返します | 3 |
| ドキュメント.ボディ | <body> 要素を返します | 1 |
| ドキュメント.cookie | ドキュメントの Cookie を返します | 1 |
| ドキュメント.doctype | ドキュメントの Doctype を返します | 3 |
| document.documentElement | <html> 要素を返します | 3 |
| document.documentMode | ブラウザが使用するモードを返します | 3 |
| document.documentURI | ドキュメントのURIを返します | 3 |
| ドキュメント.ドメイン | ドキュメント サーバーのドメイン名を返します | 1 |
| document.domConfig | 廃止。 | 3 |
| document.embeds | すべての <embed> 要素を返します | 3 |
| ドキュメント.フォーム | すべての <form> 要素を返します | 1 |
| document.head | <head> 要素を返します | 3 |
| 文書.画像 | すべての <img> 要素を返します | 1 |
| ドキュメントの実装 | DOM 実装を返します | 3 |
| document.inputEncoding | ドキュメントのエンコーディング (文字セット) を返します | 3 |
| document.lastModified | ドキュメントが更新された日時を返します | 3 |
| ドキュメント.リンク | href 属性を持つすべての <area> および <a> 要素を返します | 1 |
| document.readyState | ドキュメントの (読み込み中) ステータスを返します | 3 |
| document.referrer | リファラー (リンク ドキュメント) の URI を返します。 | 1 |
| document.scripts | すべての <script> 要素を返します | 3 |
| document.strictErrorChecking | エラーチェックが実施されているかどうかを返します | 3 |
| ドキュメントのタイトル | <title> 要素を返します | 1 |
| ドキュメント.URL | ドキュメントの完全な URL を返します | 1 |
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。