DOM:element
出典: MDC
この章は、Gecko DOM のほとんどの HTML と XML で利用可能な一般的なメソッド、プロパティ、そしてイベントの簡潔なリファレンスを提供します。
様々な W3C 仕様が要素を割り当てています。
- DOM Core 仕様書 は、ほとんどのHTML と XML ドキュメント に共有されるコアインターフェイスを説明します。
- DOM HTML 仕様書 は、Core Specification に則ってビルドされた HTML と XHTML ドキュメントのオブジェクトへのインターフェースを説明します。
- DOM Events 仕様書 は、DOM Core と Views 仕様書 に則ってビルドされた、ほとんどの DOM オブジェクトに共有されるイベントを説明します。
ここにリストされている条文は 上記のものにかかり、適切な W3C DOM 仕様書へのリンクを含みます。
これらのインターフェースは概ねほとんどの HTML と XML に共有されますが、例えば HTML テーブル要素 と HTML フォーム要素 など、個々のオブジェクトにより特化されたインターフェースは DOM HTML 仕様書にリストされています。
目次 |
[編集] プロパティ
| 名称 | 説明 | 型 | 有効範囲 |
|---|---|---|---|
attributes |
要素に付随するすべての属性。 | NamedNodeMap[1] |
すべて |
baseURIObject Firefox 3 の新機能 |
ノードの基底 URI を表す、読み込み専用の nsIURI オブジェクト |
nsIURI |
すべて (UniversalXPConnect 特権が必要) |
childNodes |
要素のすべての子ノード。 | NodeList[2] |
すべて |
className |
要素のクラスを取得・設定します。 | 文字列 | HTML/XUL |
clientHeight |
要素内部の高さ。 | 数値 | HTML |
clientLeft |
要素の左ボーダーの幅。 | 数値 | HTML |
clientTop |
要素の上ボーダーの幅。 | 数値 | HTML |
clientWidth |
要素内部の幅。 | 数値 | HTML |
dir |
要素の方向性を取得・設定します。 | 文字列 | HTML/XUL |
firstChild |
要素の最初の直接の子ノード。要素が子ノードを持たない場合は null を返します。 |
ノード | すべて |
id |
要素の ID を取得・設定します。 | 文字列 | HTML/XUL |
innerHTML |
要素のマークアップと内容を取得・設定します。 | 文字列 | HTML |
lang |
要素の属性値、テキスト、内容の言語を取得・設定します。 | 文字列 | HTML |
lastChild |
要素の最後の直接の子ノード。要素が子ノードを持たない場合は null を返します。 |
ノード | すべて |
localName |
要素の修飾名のローカルな部分。 | 文字列 | すべて |
| 名称 | 説明 | 型 | 有効範囲 |
name |
要素の name 属性を取得・設定します。 | 文字列 | HTML |
namespaceURI |
ノードの名前空間 URI。指定されていない場合は null を返します。 |
文字列 | すべて |
nextSibling |
ツリーの中で直後に位置するノード。存在しない場合は null を返します。 |
ノード | すべて |
nodeName |
ノードの名前。 | 文字列 | すべて |
nodePrincipal Firefox 3 の新機能 |
ノードの（Security）Principal。 | |
すべて (UniversalXPConnect 特権が必要) |
nodeType |
ノードの種類を表す数字。DOM 要素の場合は常に 1 を返します。 |
数値 | すべて |
nodeValue |
ノードの値。DOM 要素の場合は常に null を返します。 |
文字列 | すべて |
offsetHeight |
配置に応じた要素の高さ。 | 数値 | HTML |
offsetLeft |
要素の左ボーダーから offsetParent の左ボーダーまでの距離。 |
数値 | HTML |
offsetParent |
すべてのオフセット計算の基準となっている要素。 | 要素 | HTML |
offsetTop |
要素の上ボーダーから offsetParent の上ボーダーまでの距離。 |
数値 | HTML |
offsetWidth |
配置に応じた要素の幅。 | 数値 | HTML |
ownerDocument |
ノードが現れるドキュメント。ノードがドキュメント内に存在しない場合は null を返します。 |
ドキュメント | すべて |
| 名称 | 説明 | 型 | 有効範囲 |
parentNode |
ノードの親要素。ノードが DOM ドキュメント に存在しない場合は null を返します。 |
ノード | すべて |
prefix |
ノードの名前空間接頭辞。指定されていない場合は null を返します。 |
文字列 | すべて |
previousSibling |
ツリーの中で直前に位置するノード。存在しない場合は null を返します。 |
ノード | すべて |
scrollHeight |
要素のスクロールビューの高さ。 | 数値 | HTML |
scrollLeft |
要素の左スクロールオフセットを取得・設定します。 | 数値 | HTML |
scrollTop |
要素の上スクロールオフセットを取得・設定します。 | 数値 | HTML |
scrollWidth |
要素のスクロールビューの幅。 | 数値 | HTML |
style |
要素の style 属性の宣言を表すオブジェクト。 | CSSStyleDeclaration[3] |
HTML/XUL |
tabIndex |
タブによる移動順序の位置を取得・設定します。 | 数値 | HTML |
tagName |
要素のタグ名。 | 文字列 | すべて |
textContent |
要素とそのすべての子孫要素のテキスト内容を取得・設定します。 | 文字列 | すべて |
[編集] メソッド
| 名称と説明 | 戻り値 | 利用範囲 |
|---|---|---|
addEventListener( type, listener, useCapture )要素の特定のイベントタイプにイベントハンドラを登録します。 |
- | All |
appendChild( appendedNode )要素の最後の子ノードとしてノードを挿入します。 |
ノード | すべて |
blur()要素からキーボードフォーカスを外します。 |
- | HTML/XUL |
click()要素上でのクリックをシミュレートします。 |
- | HTML/XUL |
cloneNode( deep )ノードを複製します。ノードの内容を複製するかどうかを指定できます。 |
ノード | すべて |
dispatchEvent( event )DOM 内でノードに対してイベントを実行します。 |
真偽値 | すべて |
focus()要素にキーボードフォーカスを当てます。 |
- | HTML/XUL |
getAttribute( name )ノードから、指定された属性値を返します。 |
オブジェクト | すべて |
getAttributeNS( namespace, name )ノードから、指定された名前と名前空間に属する属性値を返します。 |
オブジェクト | すべて |
getAttributeNode( name )ノードから、指定された属性のノード表現を返します。 |
属性 | すべて |
getAttributeNodeNS( namespace, name )ノードから、指定された名前と名前空間に属する属性のノード表現を返します。 |
属性 | すべて |
| 名称と説明 | 戻り値 | 利用範囲 |
getElementsByTagName( name )要素から、指定されたタグ名のすべての子孫要素を配列にして返します。 |
ノード配列 | すべて |
getElementsByTagNameNS( namespace, name )要素から、指定されたタグ名と名前空間に属するすべての子孫要素を配列にして返します。 |
ノード配列 | すべて |
hasAttribute( name )要素が指定された属性を持っているかどうかを確認します。 |
真偽値 | すべて |
hasAttributeNS( namespace, name )要素が指定された名前空間で指定された属性を持っているかどうかを確認します。 |
真偽値 | すべて |
hasAttributes()要素が何らかの属性を持っているかどうかを確認します。 |
真偽値 | すべて |
hasChildNodes()要素が子要素を持っているかどうかを確認します。 |
真偽値 | すべて |
insertBefore( insertedNode, adjacentNode )DOM 内で、第二引数のノードを第一引数のノード (子要素) の前に挿入します。 | ノード | すべて |
normalize()要素内のすべてのテキストノードをクリーンアップします。(隣接ノードの結合、空白の削除) |
- | すべて |
removeAttribute( name )ノードから指定された属性を削除します。 |
- | すべて |
removeAttributeNS( namespace, name )ノードから、指定された名前と名前空間に属する属性を削除します。 |
- | すべて |
| 名称と説明 | 戻り値 | 利用範囲 |
removeAttributeNode( name )ノードから、指定された属性のノード表現を削除します。 |
- | すべて |
removeChild( removedNode )要素から子ノードを削除します。 |
ノード | すべて |
removeEventListener( type, handler, useCapture )要素からイベントリスナーを削除します。 |
- | All |
replaceChild( insertedNode, replacedNode )要素の子ノードを別のノードと置き換えます。 |
ノード | すべて |
scrollIntoView( alignWithTop )要素が (ブラウザ上で) 表示範囲に入るまでページをスクロールします。 |
- | HTML |
setAttribute( name, value )ノードの、指定された属性の値を設定します。 |
- | すべて |
setAttributeNS( namespace, name, value )ノードの、指定された名前と名前空間に属する属性の値を設定します。 |
- | すべて |
setAttributeNode( name, attrNode )ノードの、指定された属性のノード表現を設定します。 |
- | すべて |
setAttributeNodeNS( namespace, name, attrNode )ノードの、指定された名前と名前空間に属するノード表現を設定します。 |
- | すべて |
[編集] イベントハンドラ
HTML の「on」イベント属性に対応したプロパティがあります。
ただし、属性と異なり、これらのプロパティの値は文字列ではなく関数 (または EventListener インターフェースを実装しているその他のオブジェクト) であることに注意してください。つまり、HTML にイベント属性を設定することは、指定したコードに対するラッパー関数を生成することになります。例えば、以下の HTML を見てください。
<div onclick="foo();">click me!</div>
この場合、element はこの div への参照となります。element.onclick の値は実質的に以下のようになります。
function onclick(event) {
foo();
}
イベント オブジェクトは event パラメータとしてこのラッパー関数に渡されます。
- onblur
- blur イベントのイベント処理コードを返します。
- onchange
- change イベントのイベント処理コードを返します。
- onclick
- click イベントのイベント処理コードを返します。
- oncontextmenu
- contextmenu イベントの処理コードを返します。
- ondblclick
- dblclick イベントのイベント処理コードを返します。
- onfocus
- focus イベントのイベント処理コードを返します。
- onkeydown
- keydown イベントのイベント処理コードを返します。
- onkeypress
- keypress イベントのイベント処理コードを返します。
- onkeyup
- keyup イベントのイベント処理コードを返します。
- onmousedown
- mousedown イベントのイベント処理コードを返します。
- onmousemove
- mousemove イベントのイベント処理コードを返します。
- onmouseout
- mouseout イベントのイベント処理コードを返します。
- onmouseover
- mouseover イベントのイベント処理コードを返します。
- onmouseup
- mouseup イベントのイベント処理コードを返します。
- onresize
- resize イベントのイベント処理コードを返します。
- onscroll
- scroll イベントのイベント処理コードを返します。
[編集] その他のイベント
DOMSubtreeModified、DOMAttrModified などのような他の DOM Events と DOMContentLoaded、DOMTitleChanged などのような Gecko-Specific DOM Events があります。