HTML DOM Elementオブジェクト

Element オブジェクト

HTML DOMでは、ElementオブジェクトはP、DIV、A、TABLE、または他のどのHTML要素でもあります。

属性とメソッド

以下の属性とメソッドはすべてのHTML要素で使用できます：

属性 / メソッド 説明
accessKey 要素のaccesskey属性を設定または返します。
addEventListener() イベントハンドラを要素に追加します。
appendChild() 新しい子ノードを要素に追加（付加）します。
attributes 要素の属性のNamedNodeMapを返します。
blur() 要素からフォーカスを取り除きます。
childElementCount 要素の子要素の数を返します。
childNodes 要素の子ノードのNodeListを返します。
children 要素の子要素のHTMLコレクションを返します。
classList 要素のクラス名を返します。
className 要素のclass属性値を設定または返します。
click() 要素にマウスクリックをシミュレートします。
clientHeight 要素の高さを、インラインスペースを含めて返します。
clientLeft 要素の左端のボーダーの幅を返します。
clientTop 要素の上端のボーダーの幅を返します。
clientWidth 要素の幅を、インラインスペースを含めて返します。
cloneNode() 要素をクローンします。
closest() DOM木構造内で、CSS選択子に一致する最も近い要素を検索します。
compareDocumentPosition() 二つの要素のドキュメント位置を比較します。
contains() ノードがノードの後裔である場合にtrueを返します。
contentEditable 要素の内容が編集可能かどうかを設定または返します。
dir 要素のdir属性の値を設定または返します。
firstChild 要素の最初の子ノードを返します。
firstElementChild 要素の最初の子要素を返します。
focus() 要素に焦点を当てます。
getAttribute() 要素の属性の値を返します。
getAttributeNode() 属性ノードを返します。
getBoundingClientRect() 要素の大きさと視口に対する位置を返します。
getElementsByClassName() 指定されたクラス名を持つ子要素の集合を返します。
getElementsByTagName() 指定されたタグ名を持つ子要素の集合を返します。
hasAttribute() 要素に指定された属性がある場合にtrueを返します。
hasAttributes() 要素に属性がある場合にtrueを返します。
hasChildNodes() 要素に子ノードがある場合にtrueを返します。
element.id 要素のid属性の値を設定または返します。
innerHTML 要素の内容を設定または返します。
innerText ノードおよびその子孫のテキスト内容を設定または返します。
insertAdjacentElement() 要素に対する相対的な位置に新しいHTML要素を挿入します。
insertAdjacentHTML() 要素に対する相対的な位置にHTML形式のテキストを挿入します。
insertAdjacentText() 要素に対する相対的な位置にテキストを挿入します。
insertBefore() 既存の子ノードの前に新しい子ノードを挿入します。
isContentEditable 要素の内容が編集可能である場合にtrueを返します。
isDefaultNamespace() 指定されたnamespaceURIがデフォルト値の場合はtrueを返します。
isEqualNode() 二つの要素が等しいかどうかを確認します。
isSameNode() 二つの要素が同じノードかどうかを確認します。
isSupported() 廃止されました。
lang 要素のlang属性値を設定または返します。
lastChild 要素の最後の子ノードを返します。
lastElementChild 要素の最後の子要素を返します。
matches() 要素が指定されたCSSセレクタに一致する場合、trueを返します。
namespaceURI 要素の名前空間URIを返します。
nextSibling 同じノードツリー階層に位置する次のノードを返します。
nextElementSibling 同じノードツリー階層に位置する次の要素を返します。
nodeName ノードの名前を返します。
nodeType ノードのノードタイプを返します。
nodeValue ノードの値を設定または返します。
normalize() 要素内の相邻のテキストノードを統合し、空のテキストノードを削除します。
offsetHeight 要素の高さを返します。内余白、枠線、スクロールバーも含まれます。
offsetWidth 要素の幅を返します。内余白、枠線、スクロールバーも含まれます。
offsetLeft 要素の水平オフセット位置を返します。
offsetParent 要素のオフセットコンテナを返します。
offsetTop 要素の垂直オフセット位置を返します。
outerHTML 要素の内容（開始タグと終了タグを含む）を設定または返します。
outerText ノードおよびその子孫の外部テキスト内容を設定または返します。
ownerDocument 要素のルート要素（ドキュメントオブジェクト）を返します。
parentNode 要素の親ノードを返します。
parentElement 要素の親要素ノードを返します。
previousSibling 同じノードツリー階層に位置する前のノードを返します。
previousElementSibling 同じノードツリー階層に位置する前の要素を返します。
querySelector() CSSセレクタに一致する最初の子要素を返します。
querySelectorAll() CSSセレクタに一致するすべての子要素を返します。
remove() DOMから要素を削除します。
removeAttribute() 要素から属性を削除します。
removeAttributeNode() 属性ノードを削除し、削除されたノードを返します。
removeChild() 要素から子ノードを削除します。
removeEventListener() addEventListener() メソッドで追加されたイベントハンドラを削除します。
replaceChild() 要素内の子ノードを置き換えます。
scrollHeight 要素の全体の高さを返します。内余白も含まれます。
scrollIntoView() 要素をブラウザのウィンドウの可視エリアにスクロールします。
scrollLeft 要素の内容の水平スクロール量（ピクセル）を設定または返します。
scrollTop 要素の内容の垂直スクロール量（ピクセル）を設定または返します。
scrollWidth 要素の全体の幅（内余白を含む）を返します。
setAttribute() 属性の値を設定または変更します。
setAttributeNode() 属性ノードを設定または変更します。
style 要素のstyle属性の値を設定または返します。
tabIndex 要素のtabIndex属性の値を設定または返します。
tagName 要素のタグ名を返します。
textContent ノードおよびその子孫のテキスト内容を設定または返します。
title 要素のtitle属性値を設定または返します。
toString() 要素を文字列に変換します。

Elementインターフェースの詳細

ElementインターフェースはHTML要素、XML要素またはタグを表現します。tagName属性は要素の名前を指定します。DocumentのdocumentElement属性はこのドキュメントのルートElementオブジェクトを参照します。HTMLDocumentオブジェクトのbody属性も同様に、ドキュメントの<body>要素を参照します。HTMLドキュメント内で特定の名前の要素を見つけるには、Document.getElementById()（および要素にユニークな名前をid属性で与える）を使用します。タグ名で要素を特定するには、getElementsByTagName()を使用します。これはElementのメソッドであり、Documentのメソッドでもあります。HTMLドキュメントでは、HTMLDocument.getElementsByName()メソッドも使用して、要素のname属性に基づいて要素を検索することもできます。最後に、Document.createElement()メソッドを使用して、ドキュメントに新しいElement要素を挿入することができます。

addEventListener() メソッド（およびIE固有の代替メソッド attachEvent() ）は、特定のイベントタイプに対してイベントハンドラ関数を登録する方法を提供します。技術的には、addEventListener() 、removeEventListener() 、dispatchEvent() はすべて2階層のDOM Events規範のEventTargetインターフェースで定義されています。すべてのElementオブジェクトはEventTargetを実現しています。

このインターフェースのさまざまな他のメソッドは、要素の属性へのアクセスを提供します。HTML ドキュメント（および多くの XML ドキュメント）では、すべての属性はシンプルな文字列値を持ち、getAttribute() と setAttribute() のシンプルなメソッドを使用して必要な属性操作を行うことができます。

XML ドキュメントを使用している場合、属性値の一部としてエンティティ参照ページが含まれている可能性があります。その場合、Attr オブジェクト及其子ノードを使用する必要があります。属性に対して getAttributeNode() と setAttributeNode() を使用して Attr オブジェクトを取得および設定することもできます。また、Node インターフェースの attributes[] 配列を遍历して Attr ノードを取得することもできます。XML 名前空間を使用する XML ドキュメントを使用している場合、名前が「NS」を持つさまざまなメソッドを使用する必要があります。

1 番目の DOM 规范では、normalize() メソッドは Element インターフェースの一部です。2 番目の規范では、normalize() は Node インターフェースの一部です。すべての Element ノードはこのメソッドを継承し、それを使用できます。

知識点：HTML DOM ノード

HTML DOM（ドキュメントオブジェクトモデル）では、各部分はノードです：

  • ドキュメント自体はドキュメントノードです
  • すべての HTML 要素は要素ノードです
  • すべての HTML 属性は属性ノードです
  • HTML 要素内のテキストはテキストノードです
  • コメントはコメントノードです

Element オブジェクト

HTML DOM（ドキュメントオブジェクトモデル）では、Element オブジェクトは HTML 要素を表します。

Element オブジェクトは要素ノード、テキストノード、コメントノードのいずれかの種類の子ノードを持つことができます。

NodeList オブジェクトはノードリストを表し、例えば HTML 要素の子ノードコレクションです。

要素も属性を持つことができます。属性は属性ノード（次の節を参照）です。