path: root/files/ja/web/api/element/index.html

---
title: Element
slug: Web/API/Element
tags:
  - API
  - DOM
  - DOM Reference
  - Element
  - Interface
  - Reference
  - Web API
  - インターフェイス
translation_of: Web/API/Element
---
<div>{{APIRef("DOM")}}</div>

<p><span class="seoSummary"><strong><code>Element</code></strong> は {{DOMxRef("Document")}} の中にあるすべての要素オブジェクト (すなわち、要素を表現するオブジェクト) が継承する、もっとも一般的な基底クラスです。このインターフェイスは、すべての種類の要素に共通するメソッドとプロパティを記述するだけのものです。多くの具体的なクラスが <code>Element</code> を継承します。</span>例えば HTML 要素には {{DOMxRef("HTMLElement")}} インターフェイス、SVG 要素には {{DOMxRef("SVGElement")}} インターフェイスなど。ほとんどの機能は、クラスの階層を下りると具体化していきます。</p>

<p>XUL の <code>XULElement</code> インターフェイスのようなウェブプラットフォームの枠外の言語もまた、<code>Element</code> インターフェイスを通じて要素を実装しています。</p>

<p>{{InheritanceDiagram}}</p>

<h2 id="Properties" name="Properties">プロパティ</h2>

<p><em>親インターフェスである {{DOMxRef("Node")}}、およびその親インターフェイスである {{DOMxRef("EventTarget")}} からプロパティを継承します。そして {{DOMxRef("ParentNode")}}、{{DOMxRef("ChildNode")}}、{{DOMxRef("NonDocumentTypeChildNode")}}、{{DOMxRef("Animatable")}} のプロパティを実装しています。</em></p>

<dl>
 <dt>{{DOMxRef("Element.attributes")}} {{readOnlyInline}}</dt>
 <dd>対応する HTML 要素に関連したすべての属性のリストである {{DOMxRef("NamedNodeMap")}} を返します。</dd>
 <dt>{{DOMxRef("Element.classList")}} {{readOnlyInline}}</dt>
 <dd>class 属性のトークンリストを含む {{DOMxRef("DOMTokenList")}} を返します。</dd>
 <dt>{{DOMxRef("Element.className")}}</dt>
 <dd>{{DOMxRef("DOMString")}} 型であり、要素のクラスを表します。</dd>
 <dt>{{DOMxRef("Element.clientHeight")}} {{readOnlyInline}}</dt>
 <dd>要素の内部の高さを表す {{jsxref("Number")}} を返します。</dd>
 <dt>{{DOMxRef("Element.clientLeft")}} {{readOnlyInline}}</dt>
 <dd>要素の左境界の幅を表す {{jsxref("Number")}} を返します。</dd>
 <dt>{{DOMxRef("Element.clientTop")}} {{readOnlyInline}}</dt>
 <dd>要素の上境界の幅を表す {{jsxref("Number")}} を返します。</dd>
 <dt>{{DOMxRef("Element.clientWidth")}} {{readOnlyInline}}</dt>
 <dd>要素の内部の幅を表す {{jsxref("Number")}} を返します。</dd>
 <dt>{{DOMxRef("Element.computedName")}} {{readOnlyInline}}</dt>
 <dd>アクセシビリティ向けに公開されたラベルを含む {{DOMxRef("DOMString")}} を返します。</dd>
 <dt>{{DOMxRef("Element.computedRole")}} {{readOnlyInline}}</dt>
 <dd>特定の要素に適用された ARIA ロールを含む {{DOMxRef("DOMString")}} を返します。</dd>
 <dt>{{DOMxRef("Element.id")}}</dt>
 <dd>{{DOMxRef("DOMString")}} 型であり、要素の id を表します。</dd>
 <dt>{{DOMxRef("Element.innerHTML")}}</dt>
 <dd>{{DOMxRef("DOMString")}} 型であり、要素内容のマークアップを表します。</dd>
 <dt>{{DOMxRef("Element.localName")}} {{readOnlyInline}}</dt>
 <dd>要素の修飾名のローカル部分を表す {{DOMxRef("DOMString")}} です。</dd>
 <dt>{{DOMxRef("Element.namespaceURI")}} {{readonlyInline}}</dt>
 <dd>要素の名前空間の URI。名前空間がない場合は <code>null</code> になります。
 <div class="note">
 <p><strong>注:</strong> Firefox 3.5 および以前のバージョンでは、HTML 要素の名前空間はありません。以降のバージョンでは、HTML 要素は HTML ツリーおよび XML ツリーで <code><a class="linkification-ext external" href="http://www.w3.org/1999/xhtml" title="Linkification: http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code> 名前空間内に存在します。{{gecko_minversion_inline("1.9.2")}}</p>
 </div>
 </dd>
 <dt>{{DOMxRef("NonDocumentTypeChildNode.nextElementSibling")}} {{readOnlyInline}}</dt>
 <dd>{{DOMxRef("Element")}} 型であり、ツリー上で自身の直後の要素 (弟) を表します。兄弟ノードがなければ <code>null</code>。</dd>
 <dt>{{DOMxRef("Element.outerHTML")}}</dt>
 <dd>{{DOMxRef("DOMString")}} 型であり、その要素を内容に含むマークアップを表します。設定に用いる場合、与えられた文字列からパースされたノードでその要素を置換します。</dd>
 <dt>{{DOMxRef("Element.part")}}</dt>
 <dd>要素のパート識別子 (すなわち、 <code>part</code> 属性を使用して設定されるもの) が、 {{domxref("DOMTokenList")}} として返されます。</dd>
 <dt>{{DOMxRef("Element.prefix")}} {{readOnlyInline}}</dt>
 <dd>要素の名前空間プレフィックスを表す {{DOMxRef("DOMString")}}。プレフィックスが指定されていない場合は <code>null</code>。</dd>
 <dt>{{DOMxRef("NonDocumentTypeChildNode.previousElementSibling")}} {{readOnlyInline}}</dt>
 <dd>{{DOMxRef("Element")}} 型であり、ツリー上で自身の直前の要素 (兄) を表します。兄弟ノードが無ければ <code>null</code>。</dd>
 <dt>{{DOMxRef("Element.scrollHeight")}} {{readOnlyInline}}</dt>
 <dd>要素のスクロールビューの高さを表す {{jsxref("Number")}} を返します。</dd>
 <dt>{{DOMxRef("Element.scrollLeft")}}</dt>
 <dd>{{jsxref("Number")}} 型であり、要素の左スクロールオフセット値を表します。</dd>
 <dt>{{DOMxRef("Element.scrollLeftMax")}} {{Non-standard_Inline}} {{readOnlyInline}}</dt>
 <dd>要素で可能な左スクロールオフセットの最大値を表す {{jsxref("Number")}} を返します。</dd>
 <dt>{{DOMxRef("Element.scrollTop")}}</dt>
 <dd>文書の上端が垂直方向にスクロールされた量をピクセル数で表す {{jsxref("Number")}} です。</dd>
 <dt>{{DOMxRef("Element.scrollTopMax")}} {{Non-standard_Inline}} {{readOnlyInline}}</dt>
 <dd>要素で可能な上スクロールオフセットの最大値を表す {{jsxref("Number")}} を返します。</dd>
 <dt>{{DOMxRef("Element.scrollWidth")}} {{readOnlyInline}}</dt>
 <dd>要素のスクロールビュー幅を表す {{jsxref("Number")}} を返します。</dd>
 <dt>{{DOMxRef("Element.shadowRoot")}}{{readOnlyInline}}</dt>
 <dd>要素が所持しているオープンモードの Shadow Root、あるいはオープンモードの Shadow Root がない場合は null を返します。</dd>
 <dt>{{DOMxRef("Element.openOrClosedShadowRoot")}} {{Non-standard_Inline}}{{readOnlyInline}}</dt>
 <dd>オープン・クローズに関係なく、要素が所持している Shadow Root を返します。<strong><a href="/ja/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a> に限り使用できます。</strong></dd>
 <dt>{{DOMxRef("Element.slot")}} {{Experimental_Inline}}</dt>
 <dd>要素が挿入されている shadow DOM スロットの名前を返します。</dd>
 <dt>{{DOMxRef("Element.tabStop")}} {{Non-standard_Inline}}</dt>
 <dd>{{jsxref("Boolean")}} 型であり、要素が Tab キーによって入力フォーカスを受け取れるかを示します。</dd>
 <dt>{{DOMxRef("Element.tagName")}} {{readOnlyInline}}</dt>
 <dd>要素のタグ名を {{jsxref("String")}} で返します。</dd>
 <dt>{{DOMxRef("Element.undoManager")}} {{Experimental_Inline}} {{readOnlyInline}}</dt>
 <dd>要素に関連する {{DOMxRef("UndoManager")}} を返します。</dd>
 <dt>{{DOMxRef("Element.undoScope")}} {{Experimental_Inline}}</dt>
 <dd>{{jsxref("Boolean")}} 型であり、要素が undo scope を提供しているか否かを示します。</dd>
</dl>

<div class="note">
<p><strong>注:</strong> DOM Level 3 では、{{DOMxRef("Node")}} インターフェスで <code>namespaceURI</code>、<code>localName</code>、<code>prefix</code> を定義しています。これらは DOM4 で <code>Element</code> に移動されました。</p>

<p>この変更は Chrome がバージョン 46.0 から、Firefox がバージョン 48.0 から実装されています。</p>
</div>

<h3 id="Properties_included_from_Slotable" name="Properties_included_from_Slotable">Slotable に含まれるプロパティ</h3>

<p><em><code>Element</code> インターフェイスは、{{DOMxRef("Slotable")}} ミックスインで定義された以下のプロパティを含んでいます。</em></p>

<dl>
 <dt>{{DOMxRef("Slotable.assignedSlot")}}{{readonlyInline}}</dt>
 <dd>ノードが挿入されている {{htmlelement("slot")}} を表す {{DOMxRef("HTMLSlotElement")}} を返します。</dd>
</dl>

<h3 id="Handlers" name="Handlers">イベントハンドラー</h3>

<dl>
 <dt>{{domxref("Element.onfullscreenchange")}}</dt>
 <dd>要素が全画面モードに入ったり出たりしたときに送られる {{event("fullscreenchange")}} イベントのイベントハンドラーです。これは期待された遷移が成功したかどうかを監視するために使用することができますが、アプリの実行がバックグラウンドになった場合など、想定外の変化を監視することもできます。</dd>
 <dt>{{domxref("Element.onfullscreenerror")}}</dt>
 <dd>全画面モードへ移行しようとしてエラーが発生したときに送られる {{event("fullscreenerror")}} イベントのイベントハンドラーです。</dd>
</dl>

<h2 id="Methods" name="Methods">メソッド</h2>

<p><em>親である {{DOMxRef("Node")}}、およびその親である {{DOMxRef("EventTarget")}} からメソッドを継承しています。そして {{DOMxRef("ParentNode")}}、{{DOMxRef("ChildNode")}}、{{DOMxRef("NonDocumentTypeChildNode")}}、{{DOMxRef("Animatable")}} のメソッドを実装しています。</em></p>

<dl>
 <dt>{{DOMxRef("EventTarget.addEventListener()")}}</dt>
 <dd>要素に特定のイベント型を扱うイベントハンドラーを登録します。</dd>
 <dt>{{DOMxRef("Element.attachShadow()")}}</dt>
 <dd>指定した要素に shadow DOM ツリーを結びつけて、その {{DOMxRef("ShadowRoot")}} への参照を返します。</dd>
 <dt>{{DOMxRef("Element.animate()")}} {{Experimental_Inline}}</dt>
 <dd>要素でアニメーションを作成および実行するためのショートカットメソッドです。作成した Animation オブジェクトのインスタンスを返します。</dd>
 <dt>{{DOMxRef("Element.closest()")}} {{Experimental_Inline}}</dt>
 <dd>引数に指定したセレクターによって選択される要素がもっとも近い祖先要素 (または当該要素自身) を {{DOMxRef("Element")}} 型で返します。</dd>
 <dt>{{DOMxRef("Element.createShadowRoot()")}} {{Non-standard_Inline}} {{Deprecated_Inline}}</dt>
 <dd>要素で <a href="/ja/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a> を作成します。その要素は Shadow Host になります。また、{{DOMxRef("ShadowRoot")}} を返します。</dd>
 <dt>{{DOMxRef("Element.computedStyleMap()")}} {{Experimental_Inline}}</dt>
 <dd>{{DOMxRef("CSSStyleDeclaration")}} に代わる、CSS 宣言ブロックを読み取り専用で表現したものを提供する {{DOMxRef("StylePropertyMapReadOnly")}} インターフェイスを返します。</dd>
 <dt>{{DOMxRef("EventTarget.dispatchEvent()")}}</dt>
 <dd>DOM 内のこの (this) ノードにイベントを送ります。そして、イベントをキャンセルしたハンドラーがないかを示す {{jsxref("Boolean")}} を返します。</dd>
 <dt>{{DOMxRef("Element.getAnimations()")}} {{Experimental_Inline}}</dt>
 <dd>要素でアクティブな Animation オブジェクトの配列を返します。</dd>
 <dt>{{DOMxRef("Element.getAttribute()")}}</dt>
 <dd>現在ノードから指定された名前の付いた属性値を取得して、{{jsxref("Object")}} を返します。</dd>
 <dt>{{DOMxRef("Element.getAttributeNames()")}}</dt>
 <dd>現在の要素の属性名の配列を返します。</dd>
 <dt>{{DOMxRef("Element.getAttributeNS()")}}</dt>
 <dd>現在ノードから指定された名前と名前空間 (namespase) を持つ属性値を取得して、{{jsxref("Object")}} を返します。</dd>
 <dt>{{DOMxRef("Element.getBoundingClientRect()")}}</dt>
 <dd>要素のサイズと、ビューポートにおける位置を返します。</dd>
 <dt>{{DOMxRef("Element.getClientRects()")}}</dt>
 <dd>クライアント (ソフト) 内のテキスト上の個々の行の外接矩形 (bounding rectangle) の集合を返します。</dd>
 <dt>{{DOMxRef("Element.getElementsByClassName()")}}</dt>
 <dd>現在の要素から、引数に指定したクラス名のリストに該当するすべての子孫要素を持つ {{DOMxRef("HTMLCollection")}} を返します。</dd>
 <dt>{{DOMxRef("Element.getElementsByTagName()")}}</dt>
 <dd>現在要素から、特定のタグ名を持つすべての子孫要素の集合を取得した {{DOMxRef("HTMLCollection")}} を返します。</dd>
 <dt>{{DOMxRef("Element.getElementsByTagNameNS()")}}</dt>
 <dd>現在要素から、特定のタグ名と名前空間を持つすべての子孫要素の集合を取得した {{DOMxRef("HTMLCollection")}} を返します。</dd>
 <dt>{{DOMxRef("Element.hasAttribute()")}}</dt>
 <dd>要素が指定された指定された属性を持っているか否かを示す {{jsxref("Boolean")}} を返します。</dd>
 <dt>{{DOMxRef("Element.hasAttributeNS()")}}</dt>
 <dd>要素が指定された名前空間内に指定された属性を持っているか否かを示す {{jsxref("Boolean")}} を返します。</dd>
 <dt>{{DOMxRef("Element.hasAttributes()")}}</dt>
 <dd>要素が現在 1 つ以上の属性をもっているかを示す {{jsxref("Boolean")}} を返します。</dd>
 <dt>{{DOMxRef("Element.hasPointerCapture()")}}</dt>
 <dd>呼び出された要素が、指定されたポインター ID によって識別されるポインターのポインターキャプチャを持っているかどうかを示します。</dd>
 <dt>{{DOMxRef("Element.insertAdjacentElement()")}}</dt>
 <dd>メソッドを実行した要素に対して相対的な指定位置に、要素ノードを挿入します。</dd>
 <dt>{{DOMxRef("Element.insertAdjacentHTML()")}}</dt>
 <dd>テキストを HTML または XML としてパースして、パース結果のノードをツリーの指定した位置に挿入します。</dd>
 <dt>{{DOMxRef("Element.insertAdjacentText()")}}</dt>
 <dd>メソッドを実行した要素に対して相対的な指定位置に、テキストノードを挿入します。</dd>
 <dt>{{DOMxRef("Element.matches()")}} {{Experimental_Inline}}</dt>
 <dd>要素が指定されたセレクター文字列で選択されているか否かを示す {{jsxref("Boolean")}} を返します。</dd>
 <dt>{{DOMxRef("Element.pseudo()")}} {{Experimental_Inline}}</dt>
 <dd>指定された擬似要素セレクターに一致するこの擬似要素を表す {{DOMxRef("CSSPseudoElement")}} を返します。</dd>
 <dt>{{DOMxRef("Element.querySelector()")}}</dt>
 <dd>要素に対して、指定したセレクターにマッチする最初の {{DOMxRef("Node")}} を返します。</dd>
 <dt>{{DOMxRef("Element.querySelectorAll()")}}</dt>
 <dd>要素に対して、指定したセレクターにマッチするノードの {{DOMxRef("NodeList")}} を返します。</dd>
 <dt>{{DOMxRef("Element.releasePointerCapture()")}}</dt>
 <dd>以前に特定の {{DOMxRef("PointerEvent","pointer イベント")}} 向けに設定したポインターキャプチャーを解放 (停止) します。</dd>
 <dt>{{DOMxRef("ChildNode.remove()")}} {{Experimental_Inline}}</dt>
 <dd>親要素の子リストから、要素を取り除きます。</dd>
 <dt>{{DOMxRef("Element.removeAttribute()")}}</dt>
 <dd>現在ノードから，指定された名前を持つ属性を取り除きます。</dd>
 <dt>{{DOMxRef("Element.removeAttributeNS()")}}</dt>
 <dd>現在ノードから，指定された名前と名前空間を持つ属性を取り除きます。</dd>
 <dt>{{DOMxRef("EventTarget.removeEventListener()")}}</dt>
 <dd>要素からイベントリスナーを取り除きます。</dd>
 <dt>{{DOMxRef("Element.requestFullscreen()")}} {{Experimental_Inline}}</dt>
 <dd>要素をフルスクリーン表示するよう、ブラウザーへ非同期的に要求します。</dd>
 <dt>{{DOMxRef("Element.requestPointerLock()")}} {{Experimental_Inline}}</dt>
 <dd>指定した要素でポインターをロックするよう、非同期的に要求できます。</dd>
 <dt>{{domxref("Element.scroll()")}}</dt>
 <dd>指定された要素の中で特定の座標のセットへスクロールします。</dd>
 <dt>{{domxref("Element.scrollBy()")}}</dt>
 <dd>指定された量だけ要素をスクロールします。</dd>
 <dt>{{DOMxRef("Element.scrollIntoView()")}} {{Experimental_Inline}}</dt>
 <dd>要素がビューの内側に来るまでページをスクロールします。</dd>
 <dt>{{domxref("Element.scrollTo()")}}</dt>
 <dd>指定された要素の中で特定の座標のセットへスクロールします。</dd>
 <dt>{{DOMxRef("Element.setAttribute()")}}</dt>
 <dd>現在ノードに、指定された名前を持つ属性値を設定します。</dd>
 <dt>{{DOMxRef("Element.setAttributeNS()")}}</dt>
 <dd>現在ノードに、指定された名前と名前空間を持つ属性値を設定します。</dd>
 <dt>{{DOMxRef("Element.setCapture()")}} {{Non-standard_Inline}}</dt>
 <dd>すべてのマウスイベントを要素にリダイレクトし、マウスイベントキャプチャーを開始 (set up) します。</dd>
 <dt>{{DOMxRef("Element.setPointerCapture()")}}</dt>
 <dd>以降の <a href="/ja/docs/Web/API/Pointer_events">pointer イベント</a> のキャプチャー対象とする、特定の要素を指定します。</dd>
 <dt>{{DOMxRef("Element.toggleAttribute()")}}</dt>
 <dd>指定した要素で boolean 型の属性を切り替える、すなわち属性が存在していれば削除、属性が存在していなければ追加します。</dd>
 <dt>
 <h3 id="廃止されたメソッド">廃止されたメソッド</h3>
 </dt>
 <dt>{{DOMxRef("Element.getAttributeNode()")}} {{Obsolete_Inline}}</dt>
 <dd>現在ノードから指定された名前の属性のノード表現を取得して、{{DOMxRef("Attr")}} を返します。</dd>
 <dt>{{DOMxRef("Element.getAttributeNodeNS()")}} {{Obsolete_Inline}}</dt>
 <dd>現在ノードから指定された名前と名前空間をもつ属性のノード表現を取得して、{{DOMxRef("Attr")}} を返します。</dd>
 <dt>{{DOMxRef("Element.removeAttributeNode()")}} {{Obsolete_Inline}}</dt>
 <dd>現在ノードから、指定された名前を持つ属性のノード表現を取り除きます。</dd>
 <dt>{{DOMxRef("Element.setAttributeNode()")}} {{Obsolete_Inline}}</dt>
 <dd>現在ノードに、指定された名前を持つ属性値のノード表現を設定します。</dd>
 <dt>{{DOMxRef("Element.setAttributeNodeNS()")}} {{Obsolete_Inline}}</dt>
 <dd>現在ノードに、指定された名前と名前空間を持つ属性値のノード表現を設定します。</dd>
</dl>

<h2 id="Events" name="Events">イベント</h2>

<p>これらのイベントを待ち受けするには、 <code>addEventListener()</code> を使用するか、イベントリスナーをこのインターフェイスの <code>on<em>イベント名</em></code> プロパティに代入するかします。</p>

<dl>
 <dt>{{domxref("Element/cancel_event", "cancel")}}</dt>
 <dd>ユーザーがブラウザーに、現在開いているダイアログを閉じたいと指示したときに {{HTMLElement("dialog")}} に発生します。ブラウザーがこのイベントを発生させる可能性があるのは、例えばユーザーが <kbd>Esc</kbd> キーを押したり、ブラウザーのユーザーインターフェイスの一部である「ダイアログを閉じる」ボタンをクリックしたりした場合です。<br>
 {{domxref("GlobalEventHandlers/oncancel", "oncancel")}} プロパティから利用することもできます。</dd>
 <dt>{{domxref("Element/error_event", "error")}}</dt>
 <dd>リソースの読み込みに失敗したか、利用できなかった場合に発生します。例えば、スクリプトに実行エラーがあった場合や、画像が見つからなかった場合、無効であった場合などです。<br>
 {{domxref("GlobalEventHandlers/onerror", "onerror")}} プロパティから利用することもできます。</dd>
 <dt>{{domxref("Element/scroll_event", "scroll")}}</dt>
 <dd>文書のビューまたは要素がスクロールしたときに発生します。<br>
 {{DOMxRef("GlobalEventHandlers.onscroll", "onscroll")}} プロパティから利用することもできます。</dd>
 <dt>{{domxref("Element/select_event", "select")}}</dt>
 <dd>いくらかのテキストが選択されたときに発生します。<br>
 {{DOMxRef("GlobalEventHandlers.onselect", "onselect")}} プロパティから利用することもできます。</dd>
 <dt>{{domxref("Element/show_event", "show")}}</dt>
 <dd>{{domxref("Element/contextmenu_event", "contextmenu")}} イベントが <code><a href="/ja/docs/Web/html/Global_attributes/contextmenu">contextmenu</a></code> 属性を持つ要素で発生したか、バブリングで到達した場合に発生します。 {{deprecated_inline}}<br>
 {{DOMxRef("GlobalEventHandlers.onshow", "onshow")}} プロパティから利用することもできます。</dd>
 <dt>{{domxref("Element/wheel_event","wheel")}}</dt>
 <dd>ユーザーがポインティングデバイス (普通はマウス) のホイールボタンを回転させたときに発生します。<br>
 {{DOMxRef("GlobalEventHandlers.onwheel", "onwheel")}} プロパティから利用することもできます。</dd>
</dl>

<h3 id="Clipboard_events" name="Clipboard_events">クリップボードイベント</h3>

<dl>
 <dt>{{domxref("Element/copy_event", "copy")}}</dt>
 <dd>ユーザーがブラウザーのユーザーインターフェイスを通して、コピー操作を行ったときに発生します。<br>
 {{domxref("HTMLElement/oncopy", "oncopy")}} プロパティから利用することもできます。</dd>
 <dt>{{domxref("Element/cut_event", "cut")}}</dt>
 <dd>ユーザーがブラウザーのユーザーインターフェイスを通して、切り取り操作を行ったときに発生します。<br>
 {{domxref("HTMLElement/oncut", "oncut")}} プロパティから利用することもできます。</dd>
 <dt>{{domxref("Element/paste_event", "paste")}}</dt>
 <dd>ユーザーがブラウザーのユーザーインターフェイスを通して、貼り付け操作を行ったときに発生します。<br>
 {{domxref("HTMLElement/onpaste", "onpaste")}} プロパティから利用することもできます。</dd>
</dl>

<h3 id="Composition_events" name="Composition_events">構成イベント</h3>

<dl>
 <dt>{{domxref("Element/compositionend_event", "compositionend")}}</dt>
 <dd>{{glossary("input method editor")}} のようなテキスト構成システムで、現在の入力セッションが完了またはキャンセルされたときに発生します。</dd>
 <dt>{{domxref("Element/compositionstart_event", "compositionstart")}}</dt>
 <dd>{{glossary("input method editor")}} のようなテキスト構成システムで、新しい入力セッションを始まったときに発生します。</dd>
 <dt>{{domxref("Element/compositionupdate_event", "compositionupdate")}}</dt>
 <dd>{{glossary("input method editor")}} のようなテキスト構成システムによって制御されている入力セッションのコンテキストに、新しい文字が入力されたときに発生します。</dd>
</dl>

<h3 id="Focus_events" name="Focus_events">フォーカスイベント</h3>

<dl>
 <dt>{{domxref("Element/blur_event", "blur")}}</dt>
 <dd>要素がフォーカスを失ったときに発生します。<br>
 {{domxref("GlobalEventHandlers/onblur", "onblur")}} プロパティから利用することもできます。</dd>
 <dt>{{domxref("Element/focus_event", "focus")}}</dt>
 <dd>要素がフォーカスを受け取ったときに発生します。<br>
 {{domxref("GlobalEventHandlers/onfocus", "onfocus")}} プロパティから利用することもできます。</dd>
 <dt>{{domxref("Element/focusin_event", "focusin")}}</dt>
 <dd>要素がフォーカスを受け取ろうとしているときに発生します。</dd>
 <dt>{{domxref("Element/focusout_event", "focusout")}}</dt>
 <dd>要素がフォーカスを失おうとしているときに発生します。</dd>
</dl>

<h3 id="Fullscreen_events" name="Fullscreen_events">全画面イベント</h3>

<dl>
 <dt>{{domxref("Element/fullscreenchange_event", "fullscreenchange")}}</dt>
 <dd>全画面モードへの移行時または終了時に、 {{domxref("Document")}} または {{domxref("Element")}} に送られます。</dd>
 <dd>{{domxref("Element.onfullscreenchange", "onfullscreenchange")}} プロパティから利用することもできます。</dd>
 <dt>{{domxref("Element/fullscreenerror_event", "fullscreenerror")}}</dt>
 <dd>全画面モードへの移行または終了を試みている中でエラーが発生したときに、 <code>Document</code> または <code>Element</code> に送られます。</dd>
 <dd>{{domxref("Element.onfullscreenerror", "onfullscreenerror")}} プロパティから利用することもできます。</dd>
</dl>

<h3 id="Keyboard_events" name="Keyboard_events">キーボードイベント</h3>

<dl>
 <dt><code>{{domxref("Element/keydown_event", "keydown")}}</code></dt>
 <dd>キーが押されたときに発生します。<br>
 {{domxref("GlobalEventHandlers/onkeydown", "onkeydown")}} プロパティから利用することもできます。</dd>
 <dt><code>{{domxref("Element/keypress_event", "keypress")}}</code></dt>
 <dd>文字の値を発生させるキーが押されたときに発生します。 {{deprecated_inline}}<br>
 {{domxref("GlobalEventHandlers/onkeypress", "onkeypress")}} プロパティから利用することもできます。</dd>
 <dt><code>{{domxref("Element/keyup_event", "keyup")}}</code></dt>
 <dd>キーが離されたときに発生します。<br>
 {{domxref("GlobalEventHandlers/onkeyup", "onkeyup")}} プロパティから利用することもできます。</dd>
</dl>

<h3 id="Mouse_events" name="Mouse_events">マウスイベント</h3>

<dl>
 <dt>{{domxref("Element/auxclick_event", "auxclick")}}</dt>
 <dd>ポインティングデバイスの第一ボタン以外のボタン (例えば、マウスの左ボタン以外のボタン) が要素上で押されて離されたときに発生します。<br>
 {{domxref("GlobalEventHandlers/onauxclick", "onauxclick")}} プロパティから利用することもできます。</dd>
 <dt>{{domxref("Element/click_event", "click")}}</dt>
 <dd>ポインティングデバイスのボタン (例えば、マウスの第一ボタン) が単一の要素上で押されて離されたときに発生します。<br>
 {{domxref("GlobalEventHandlers/onclick", "onclick")}} プロパティから利用することもできます。</dd>
 <dt>{{domxref("Element/contextmenu_event", "contextmenu")}}</dt>
 <dd>ユーザーがコンテキストメニューを開こうとしたときに発生します。<br>
 {{domxref("GlobalEventHandlers/oncontextmenu", "oncontextmenu")}} プロパティから利用することもできます。</dd>
 <dt>{{domxref("Element/dblclick_event", "dblclick")}}</dt>
 <dd>ポインティングデバイスのボタン (例えば、マウスの第一ボタン) が単一の要素上で2回クリックされたときに発生します。<br>
 {{domxref("GlobalEventHandlers/ondblclick", "ondblclick")}} プロパティから利用することもできます。</dd>
 <dt>{{domxref("Element/DOMActivate_event", "DOMActivate")}} {{Deprecated_Inline}}</dt>
 <dd>要素が、例えばマウスのクリックやキーの押下によってアクティブになったときに発生します。</dd>
 <dt>{{domxref("Element/mousedown_event", "mousedown")}}</dt>
 <dd>ポインティングデバイスのボタンが要素上で押されたときに発生します。<br>
 {{domxref("GlobalEventHandlers/onmousedown", "onmousedown")}} プロパティから利用することもできます。</dd>
 <dt>{{domxref("Element/mouseenter_event", "mouseenter")}}</dt>
 <dd>ポインティングデバイス (ふつうはマウス) が、リスナーが割り当てられた要素の上へ移動したときに発生します。<br>
 {{domxref("GlobalEventHandlers/onmouseenter", "onmouseenter")}} プロパティから利用することもできます。</dd>
 <dt>{{domxref("Element/mouseleave_event", "mouseleave")}}</dt>
 <dd>ポインティングデバイス (ふつうはマウス) が、リスナーが割り当てられた要素の外へ移動したときに発生します。<br>
 {{domxref("GlobalEventHandlers/onmouseleave", "onmouseleave")}} プロパティから利用することもできます。</dd>
 <dt>{{domxref("Element/mousemove_event", "mousemove")}}</dt>
 <dd>ポインティングデバイス (ふつうはマウス) が、要素の上を移動したときに発生します。<br>
 {{domxref("GlobalEventHandlers/onmousemove", "onmousemove")}} プロパティから利用することもできます。</dd>
 <dt>{{domxref("Element/mouseout_event", "mouseout")}}</dt>
 <dd>ポインティングデバイス (ふつうはマウス) が、リスナーが割り当てられた要素またはその子要素の外へ移動したときに発生します。<br>
 {{domxref("GlobalEventHandlers/onmouseout", "onmouseout")}} プロパティから利用することもできます。</dd>
 <dt>{{domxref("Element/mouseover_event", "mouseover")}}</dt>
 <dd>ポインティングデバイス (ふつうはマウス) が、リスナーが割り当てられた要素またはその子要素の上を移動したときに発生します。<br>
 {{domxref("GlobalEventHandlers/onmouseover", "onmouseover")}} プロパティから利用することもできます。</dd>
 <dt>{{domxref("Element/mouseup_event", "mouseup")}}</dt>
 <dd>ポインティングデバイスのボタンが要素の上で離されたときに発生します。<br>
 {{domxref("GlobalEventHandlers/onmouseup", "onmouseup")}} プロパティから利用することもできます。</dd>
 <dt>{{domxref("Element/webkitmouseforcechanged_event", "webkitmouseforcechanged")}}</dt>
 <dd>trackpadtouchscreen の上の圧力が変化するたびに発生します。</dd>
 <dt>{{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}}</dt>
 <dd>「強制クリック」と判断されるのに十分な圧力があった直後の mousedown イベントの後で発生します。</dd>
 <dt>{{domxref("Element/webkitmouseforcewillbegin_event", "webkitmouseforcewillbegin")}}</dt>
 <dd>{{domxref("Element/mousedown_event", "mousedown")}} イベントの前に発生します。</dd>
 <dt>{{domxref("Element/webkitmouseforceup_event", "webkitmouseforceup")}}</dt>
 <dd>「強制クリック」が終了したといえるほど圧力が減少した直後の {{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}} イベントの後で発生します。</dd>
</dl>

<h3 id="Touch_events" name="Touch_events">タッチイベント</h3>

<dl>
 <dt>{{domxref("Element/touchcancel_event", "touchcancel")}}</dt>
 <dd>1つ以上のタッチ点が実装依存の理由により破棄された (例えば、タッチ点が多く作られすぎた) 場合に発生します。<br>
 {{domxref("GlobalEventHandlers/ontouchcancel", "ontouchcancel")}} プロパティから利用することもできます。</dd>
 <dt>{{domxref("Element/touchend_event", "touchend")}}</dt>
 <dd>1つ以上のタッチ点がタッチ面から取り除かれたときに発生します。<br>
 {{domxref("GlobalEventHandlers/ontouchend", "ontouchend")}} プロパティから利用することもできます。</dd>
 <dt>{{domxref("Element/touchmove_event", "touchmove")}}</dt>
 <dd>1つ以上のタッチ点がタッチ面上で移動したときに発生します。<br>
 {{domxref("GlobalEventHandlers/ontouchmove", "ontouchmove")}} プロパティから利用することもできます。</dd>
 <dt>{{domxref("Element/touchstart_event", "touchstart")}}</dt>
 <dd>1つ以上のタッチ点がタッチ面に配置されたときに発生します。<br>
 {{domxref("GlobalEventHandlers/ontouchstart", "ontouchstart")}} プロパティから利用することもできます。</dd>
</dl>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("CSS4 Pseudo-Elements", '#window-interface', 'Element')}}</td>
   <td>{{Spec2("CSS4 Pseudo-Elements")}}</td>
   <td><code>pseudo()</code> メソッドを追加</td>
  </tr>
  <tr>
   <td>{{SpecName("Web Animations", '', '')}}</td>
   <td>{{Spec2("Web Animations")}}</td>
   <td><code>getAnimations()</code> メソッドを追加</td>
  </tr>
  <tr>
   <td>{{SpecName('Undo Manager', '', 'Element')}}</td>
   <td>{{Spec2('Undo Manager')}}</td>
   <td><code>undoScope</code> と <code>undoManager</code> プロパティを追加した。</td>
  </tr>
  <tr>
   <td>{{SpecName('Pointer Events 2', '#extensions-to-the-element-interface', 'Element')}}</td>
   <td>{{Spec2('Pointer Events 2')}}</td>
   <td>イベントハンドラーを追加: <code>ongotpointercapture</code>, <code>onlostpointercapture</code><br>
    メソッドを追加: <code>setPointerCapture()</code>, <code>releasePointerCapture()</code></td>
  </tr>
  <tr>
   <td>{{SpecName('Pointer Events', '#extensions-to-the-element-interface', 'Element')}}</td>
   <td>{{Spec2('Pointer Events')}}</td>
   <td>イベントハンドラーを追加: <code>ongotpointercapture</code>, <code>onlostpointercapture</code><br>
    メソッドを追加: <code>setPointerCapture()</code>, <code>releasePointerCapture()</code></td>
  </tr>
  <tr>
   <td>{{SpecName('Selectors API Level 1', '#interface-definitions', 'Element')}}</td>
   <td>{{Spec2('Selectors API Level 1')}}</td>
   <td>メソッドを追加: <code>querySelector()</code>, <code>querySelectorAll()</code></td>
  </tr>
  <tr>
   <td>{{SpecName('Pointer Lock', '#extensions-to-the-element-interface', 'Element')}}</td>
   <td>{{Spec2('Pointer Lock')}}</td>
   <td><code>requestPointerLock()</code> メソッドを追加</td>
  </tr>
  <tr>
   <td>{{SpecName('Fullscreen', '#api', 'Element')}}</td>
   <td>{{Spec2('Fullscreen')}}</td>
   <td><code>requestFullscreen()</code> メソッドを追加</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM Parsing', '#extensions-to-the-element-interface', 'Element')}}</td>
   <td>{{Spec2('DOM Parsing')}}</td>
   <td>プロパティを追加: <code>innerHTML</code>, <code>outerHTML</code><br>
    メソッドを追加: <code>insertAdjacentHTML()</code></td>
  </tr>
  <tr>
   <td>{{SpecName('CSSOM View', '#extension-to-the-element-interface', 'Element')}}</td>
   <td>{{Spec2('CSSOM View')}}</td>
   <td>プロパティを追加: <code>scrollTop</code>, <code>scrollLeft</code>, <code>scrollWidth</code>, <code>scrollHeight</code>, <code>clientTop</code>, <code>clientLeft</code>, <code>clientWidth</code>, <code>clientHeight</code><br>
    メソッドを追加: <code>getClientRects()</code>, <code>getBoundingClientRect()</code>, <code>scroll()</code>, <code>scrollBy()</code>, <code>scrollTo()</code> and <code>scrollIntoView()</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('Element Traversal', '#ecmascript-bindings', 'Element')}}</td>
   <td>{{Spec2('Element Traversal')}}</td>
   <td>{{DOMxRef("ElementTraversal")}} インターフェイスのインスタンスを追加。</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM WHATWG', '#interface-element', 'Element')}}</td>
   <td>{{Spec2('DOM WHATWG')}}</td>
   <td>メソッドを追加: <code>closest()</code>, <code>insertAdjacentElement()</code>, <code>insertAdjacentText()</code><br>
    Moved <code>hasAttributes()</code> from the <code>Node</code> interface to this one.</td>
  </tr>
  <tr>
   <td>{{SpecName("DOM4", "#interface-element", "Element")}}</td>
   <td>{{Spec2("DOM4")}}</td>
   <td>メソッドを削除: <code>closest()</code>, <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, <code>setIdAttributeNode()</code><br>
    <code>getElementsByTag()</code> および <code>getElementsByTagNS()</code> の返値を変更。<br>
    <code>schemaTypeInfo</code> プロパティを削除。</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM3 Core', 'core.html#ID-745549614', 'Element')}}</td>
   <td>{{Spec2('DOM3 Core')}}</td>
   <td>メソッドを追加: <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, <code>setIdAttributeNode()</code>。これらのメソッドは実装されず、のちの仕様書で削除されました。<br>
    <code>schemaTypeInfo</code> プロパティを追加。このプロパティは実装されず、後の仕様で削除されました。</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM2 Core', 'core.html#ID-745549614', 'Element')}}</td>
   <td>{{Spec2('DOM2 Core')}}</td>
   <td><code>normalize()</code> メソッドを {{DOMxRef("Node")}} に移動。</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM1', 'level-one-core.html#ID-745549614', 'Element')}}</td>
   <td>{{Spec2('DOM1')}}</td>
   <td>初回定義</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>

<p>{{Compat("api.Element")}}</p>