HTML Living Standard/DOM/Element

Element

Element は、DOM (Document Object Model) の中心的なインターフェースであり、HTML または XML ドキュメント内の要素を表します。このインターフェースは、要素ノード (element nodes) に特化した属性やメソッドを提供します。

概要

Element は、Node インターフェースから継承される多くの機能を持ちながら、要素固有の機能を追加しています。このインターフェースを使用することで、要素の属性、子ノード、名前空間、およびその他のプロパティを操作できます。

継承元

Element は以下のインターフェースを継承しています:

• Node
• EventTarget

プロパティ

Element には、要素の属性や状態を操作するためのプロパティが多数定義されています。

• attributes

  要素のすべての属性を表す NamedNodeMap オブジェクトを返します。

• tagName

  要素のタグ名を返します (大文字で返されることに注意)。例えば、<div> 要素の場合、DIV を返します。

• id

  要素の id 属性の値を取得または設定します。

• className

  要素の class 属性の値を取得または設定します。

• classList

  要素のクラスのリストを表す DOMTokenList オブジェクトを返します。便利なメソッド (add(), remove(), toggle() など) を使用してクラスを操作できます。

• innerHTML

  要素の HTML コンテンツを取得または設定します。

• outerHTML

  要素自身を含む HTML を取得または設定します。

• namespaceURI

  要素の名前空間 URI を返します。

• localName

  要素の名前空間内でのローカル名を返します。

• prefix

  要素の名前空間プレフィックスを返します。

メソッド

Element では、要素の操作を行うための強力なメソッドが提供されています。

属性操作

• getAttribute(name)

  指定された属性の値を取得します。

• setAttribute(name, value)

  指定された名前と値で属性を設定します。すでに属性が存在する場合、その値を上書きします。

• hasAttribute(name)

  指定された属性が存在する場合に true を返します。

• removeAttribute(name)

  指定された属性を削除します。

子ノードの操作

• append(...nodesOrStrings)

  要素の末尾に子ノードまたは文字列を追加します。

• prepend(...nodesOrStrings)

  要素の先頭に子ノードまたは文字列を追加します。

• replaceChildren(...nodesOrStrings)

  要素内のすべての子ノードを指定したノードまたは文字列で置き換えます。

• remove()

  要素自身を DOM ツリーから削除します。

要素検索

• querySelector(selectors)

  セレクターに一致する最初の要素を返します。

• querySelectorAll(selectors)

  セレクターに一致するすべての要素を NodeList として返します。

スクロール関連

• scrollIntoView(optional ScrollIntoViewOptions options)

  要素をスクロールしてビュー内に表示します。

その他

• matches(selectors)

  要素が指定されたセレクターに一致するかを判定します。

• closest(selectors)

  要素自体または親要素の中で、指定されたセレクターに一致する最初の要素を返します。

特記事項

• このインターフェースは、すべての HTML 要素および SVG 要素の基盤となります。
• 名前空間に依存する操作や、HTML 特有の要素と XML の要素では動作が異なる場合があります。

関連情報

• Node
• HTMLDocument
• GlobalEventHandlers

関連仕様

• DOM Living Standard - Element
• MDN Web Docs - Element