Element インターフェイス

　Element インターフェイスは、HTML と XML タグエレメントをオブジェクト化するためのインターフェイス（クラス、設計書）です。インターフェイスに基づいてオブジェクト化(正確にはインスタンス化)されます。
　例えば、HTML ページの <html> 以内のタグエレメントは DOM に基づいて Element インターフェイスを継承したオブジェクトに変換されます。

Element 継承図

EventTarget
- └─ Node
  - ├─ Document
  - └─ Element
    - └─ HTMLElement
      - └─ HTMLHeadElement、HTMLBodyElement...など

タグエレメントと属性

　タグの属性は、Attrオブジェクト、イベントハンドラー、スタイルに分類されます。スタイルは CSS , <style> に関する属性です。

HTMLタグエレメントと各インターフェイス

<p(Element) class="example_p"(Attr) onclick="func_Example()"(Event) style="border:1px solid silver;"(CSS,Style)>

　<p>タグは Element です。 class属性、onclick属性、style属性は、それぞれAttr、Event、CSSに分類されます。

　styleなどはCSS Object Modelによって変換されます。CSS Object ModelはDOMとは別仕様ですが、スクリプトから操作が可能です。

　JavaScriptからCSS、style属性を操作する方法は以下のような構文を使います。ElementはHTMLエレメントです。***にプロパティ名が入ります。

Elementのstyle属性にアクセス

var re_val = Element.style.***;

Element インスタンスの生成

　Element インスタンスは Document.createElement() メソッドによって生成します。例えば以下のように記述します。

<p>エレメントの生成

var new_element = document.createElement("p");
document.getElementById("example").appendChild( new_element );

　生成したインスタンスは、Node.appendChild() メソッドなどによって表示中のエレメントに加えることで見えるようになります。
　Node.appendChild() メソッドは Node インターフェイスのメソッドです。 Element インターフェイスが Node インターフェイスを継承しているためにそのメソッドを使うことができます。

イベントハンドラーの設定

　EventTarget から継承されたメソッドでよく使われるものに addEventListener() があります。エレメントにイベントハンドラーを追加するメソッドです。
　引数にイベントタイプと関数式を指定します。

エレメントにイベントハンドラーを追加

document.getElementById("example").addEventListener( 'click', ()=>{
	console.log( event );
});

Nodeインターフェイスの継承

　Element クラスは Node を継承しています。そのために Node のプロパティとメソッドが Element インスタンスで使うことができます。

プロパティ(Properties)

プロパティ例

var html_text = element.innerHTML;

プロパティ名(Property)	概要	分類
.assignedSlot	DOM Shadowに関するHTMLSlotElementを返す	DOM Shadow
.attributes	エレメントの属性リスト NamedNodeMapを返す	属性
.childElementCount	子エレメントの数	子エレメント
.children	子エレメントを返す	子エレメント
.classList	class属性のリスト DOMTokenListを返す	属性
.className	class属性値（class名）の取得と設定。DOMString 型	属性
.clientHeight	エレメント内部の高さ、Number 型	サイズ
.clientLeft	エレメント内部の左端からの位置、Number 型	サイズ
.clientTop	エレメント内部の上端からの位置、Number 型	サイズ
.clientWidth	エレメント内部の幅、Number 型	サイズ
.firstElementChild	最初の子エレメント	子エレメント
.id	id属性値（id名）の取得と設定。DOMString 型	属性
.innerHTML	エレメント内部のHTML、XMLテキストの取得と設定。DOMString 型。テキストのみはHTMLElement.innerText	HTML、XMLテキスト
.lastElementChild	子エレメントの中で最後のエレメント	子エレメント
.localName	XMLテキストでの修飾名におけるローカル部分　<data:example >	XML
.namespaceURI	XMLテキストやSVGなどでの名前空間の URI	XML
.nextElementSibling	直後の兄弟エレメント。Element 型	兄弟エレメント
.outerHTML	エレメントのHTML、XMLテキスト。取得と設定。DOMString 型	HTML、XMLテキスト
.part	DOM Shadowに関するpart属性をもつエレメントのリストの取得と設定　DOMTokenList	DOM Shadow
.prefix	XMLテキストでの修飾名における接頭辞　DOMString型　<data:example >	XML
.previousElementSibling	直前の兄弟エレメント。Element 型	兄弟エレメント
.scrollHeight	スクロールビューにおける高さ　Number 型	スクロール
.scrollLeft	スクロールビューにおける、見えている左端が全体の左端からどの位置かの取得と設定 Number 型	スクロール
.scrollTop	スクロールビューにおける、見えている上端が全体の上端からどの位置かの取得と設定 Number 型	スクロール
.scrollWidth	スクロールビューにおける見えている幅？　Number 型	スクロール
.shadowRoot	DOM Shadowに関するルートになるエレメントを返す	DOM Shadow
.tagName	タグ名をString 型で返す	エレメント情報

継承 Property　

プロパティ(Property)	概要	分類

メソッド ( Methods )

メソッド使用例

var elements_ = element.getElementsByTagName('p');

メソッド名(Method)	概要	分類
.attachShadow()	shadow DOM。エレメントにShadowRootを追加する	shadow DOM
.animate()	動きのあるエレメントの作成と実行　Animationインスタンスが返り値
.append()	最後の子エレメントの後ろに Node インスタンスまたは DOMString を追加	オブジェクト操作
.closest()	引数のセレクターに該当するエレメントまたは近い Element を返す
.getAttribute()	カッコで指定された属性名の値を Object 型で返す	属性情報
.getAttributeNames()	エレメントがもつ属性の名称を配列で返す
.getAttributeNode()	カッコで指定された属性をノード表現の　Attr として返す
.getAttributeNodeNS()	XML。引数の名称と名前空間をもつ属性をノード表現の　Attr として返す
.getAttributeNS()	XML。引数の名称と名前空間をもつ属性を Object 型で返す
.getBoundingClientRect()	エレメントのサイズと位置を返す	サイズ、設定
.getClientRects()	包括するエレメントの位置と大きさなどの DOMRect オブジェクトのコレクションを返す	サイズ、設定
.getElementsByClassName()	クラス名からエレメントを取得	Element取得
.getElementsByTagName()	タグ名からエレメントを取得	Element取得
.getElementsByTagNameNS()	XML。エレメントからタグ名と名前空間をもつ子孫エレメントをHTMLCollection で返す	XML
.hasAttribute()	引数の属性があるかを Boolean で返す	属性
.hasAttributeNS()	XML。引数の名前空間の属性があるかを Boolean で返す
.hasAttributes()	エレメントが１つ以上の属性を持っているかを Boolean で返す
.hasPointerCapture()	引数のポインター IDをもつポインターキャプチャがあるかを返す
.insertAdjacentElement()	引数の相対的な指定位置にエレメントを追加
.insertAdjacentHTML()	テキストをエレメントに変換し指定位置に挿入する
.insertAdjacentText()	指定位置にテキストを挿入
.matches()	引数のセレテクターで選択できるかを Boolean で返す
.prepend()	最初の子エレメントの前にNode オブジェクトまたは DOMString オブジェクトを挿入
.querySelector()	引数のセレクターに一致する最初のNode を返す	Element取得
.querySelectorAll()	引数のセレクターに一致するNodeList を返す	Element取得
.releasePointerCapture()	ポインターキャプチャーを解放 (停止)
.remove()	子エレメントの削除	オブジェクト操作
.removeAttribute()	指定した名称の属性を削除
.removeAttributeNode()	指定したNodeである属性を削除
.removeAttributeNS()	XML。名前と名前空間を持つ属性を削除
.replaceChildren()	子Nodeの置き換え	オブジェクト操作
.replaceWith()	Node または DOMString オブジェクトの置き換え
.requestFullscreen()	非同期的に全画面表示
.requestPointerLock()	非同期的にポインターをロック
.scroll()	指定座標にスクロール
.scrollBy()	指定量分をスクロール
.scrollIntoView()	ビューの内側までスクロール
.scrollTo()	指定座標にスクロール
.setAttribute()	指定した属性名に値を設定
.setAttributeNode()	指定した属性を指定Nodeに設定
setAttributeNodeNS()	XML。指定された名前と名前空間を持つ属性をNodeとして設定
.setAttributeNS()	XML。指定された名前と名前空間を持つ属性の値を設定
.setCapture()	マウスイベントをリダイレクトし、マウスキャプチャーを開始
.setPointerCapture()	pointer イベントのキャプチャー対象に設定
.toggleAttribute()	指定属性が存在していたら削除、存在していないなら追加

継承 Method　

メソッド(Method)	概要	分類

イベント ( Event )

　最新の仕様によると Element インターフェイスにはイベントハンドラーは含まれていないようです。しかしながら、古いバージョンに対応するためにここではイベントについてを説明しています。

　Element への設定が対象となるイベントハンドラーです。定義方法には以下があります。

Element.addEventListener( 'click', ()=>{...} )

Element.onclick = function(){...}

<p onclick = "..." >

　イベントハンドラーとは、onイベント名のエレメントの属性です。イベント名はイベントタイプともいいます。この属性が設定されることで、ユーザーの操作やブラウザ内の変化を監視します。 Elementでイベントを捉えたら、そのハンドラーに定義された関数や関数式を実行します。

　イベントについてはEventを参照してください。イベントの監視についてはEventTargetが担っています。

　Element のイベントハンドラーは GlobalEventHandlers ミックスインを継承しています。詳しくは、 GlobalEventHandlers ミックスインを参照してください。

GlobalEventHandlers ミックスインを以下に追加表示します。

タイプ名（ハンドラー名）	概要	分類

　Element自体は継承していませんが、<body>や<iframe>エレメントは、WindowEventHandlers ミックスインも継承しています。

Element インターフェイス

タグエレメントと属性

Element インスタンスの生成

イベントハンドラーの設定

Nodeインターフェイスの継承

プロパティ(Properties)

メソッド ( Methods )

イベント ( Event )

関連（Related）

HTML

CSS

DOM

HTMLエレメント

Window