JavaScript HTML DOM ドキュメント

HTML DOMドキュメントオブジェクトはあなたのウェブページの他のすべてのオブジェクトの所有者です。

HTML DOM Documentオブジェクト

ドキュメントオブジェクトはあなたのウェブページを表すものです。

HTMLページの任何の要素にアクセスしたい場合は、常にdocumentオブジェクトから始める必要があります。

以下は、documentオブジェクトを使用してHTMLにアクセスおよび操作する例です。

HTML要素を検索する

メソッド 説明
document.getElementById(id) 要素のidで要素を検索する
document.getElementsByTagName(name) タグ名で要素を検索する
document.getElementsByClassName(name) クラス名で要素を検索する

HTML要素を変更する

メソッド 説明
element.innerHTML = 新しいHTMLコンテンツ 要素のinner 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 Level 1（1998）では、11個の HTML オブジェクト、オブジェクトコレクション、属性が定義されました。これらは HTML5 でも有効です。

その後、HTML DOM Level 3 で、多くのオブジェクト、コレクション、属性が追加されました。

属性 説明 DOM
document.anchors name 属性を持つすべての <a> 要素を返します。 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 タイトル要素を返します 1
document.URL ドキュメントの完全な URL を返します 1