HTML DOM


HTML DOMとは

 DOMとはDocument Object Modelの略です。HTMLは階層構造になっており、その階層がどうなっているかを定義したものです。これが何の役に立つかと言うと、JavaScriptでHTMLを操作するとき必要になります。

 HTML DOMの最上位には次のオブジェクトがあります。


 JavaScriptではこの他にブラウザオブジェクトと言うのも扱います。


documentオブジェクト

 documentオブジェクトは現在のウェブページを表します。

プロパティ

ドキュメント全体の属性

document.anchors
ページ内にあるすべての<a>要素のコレクション。
document.baseURI
ページの絶対ベースURI。
document.body
そのページの<body>要素。
document.cookie
そのページのクッキー。
document.doctype
そのページのドキュメントタイプ。
document.documentElement
そのページの<html>要素。
document.documentMode
ブラウザによって使用されるモード。
document.documentURI
そのページのURI。
document.domain
そのページのドメイン。
document.domConfig
DOMの構成。
document.embeds
ページ内にあるすべての<embed>要素のコレクション。
document.forms
ページ内にあるすべての<form>要素のコレクション。
document.head
そのページの<head>要素。
document.images
ページ内にあるすべての<images>要素のコレクション。
document.implementation
DOMの実装。
document.inputEncoding
そのページの文字コード。
document.lastModified
そのページが最後に更新された日時。
document.links
そのページの<area>と<a>要素のコレクション。
document.readyState
そのページのロード状態。
document.referrer
そのページの参照者のURI。
document.scripts
そのページの<script>要素
document.strictErrorChecking
エラーチェック結果。
document.title
そのページのタイトル(<title>の内容)
document.URL
そのページの完全なURL。

サンプル

要素の属性

element.innerHTML
要素の内容
element.attribute
要素の属性
element.style.property
要素のスタイル

メソッド

HTML要素の参照

document.getElementById(id)
識別名が id である要素の参照を取得する。
document.getElementsByTagName(tag)
タグ名が tag である要素の参照配列を取得する。
document.getElementsByClassName(class)
クラス名が class である要素の参照配列を取得する。

HTML要素の追加と削除

document.createElement(tag)
タグ名 tag の要素を作成する。
element.removeChild(child)
ある要素 element の子要素 child を削除する。
element.appendChild(child)
ある要素 element に子要素 child を追加する。
element.replaceChild(newChild, oldChild)
ある要素 element の子要素 oldChild を newChild で置換する。
document.write(text)
文字列を出力ストリームに送る。

要素の属性

element.setAttribute(attribute, value)
属性 attribute を value に設定する。

サンプル


イベント

 以下のイベントはよく使用されるものです。他のイベントも含む説明はこちらを参照してください。

onclick
要素がクリックされたとき
onload
要素がロードされ使用可能になった時
onfocus
要素がフォーカスを得たとき
onblur
要素がフォーカスを失ったとき
onmouseover
マウスが上にあるとき
onmousedown
マウスボタンが下がった時
onmouseup
マウスボタンが上がった時
onsubmit
フォームが送信される時

サンプル

 

このページの先頭へ戻る