備忘録的プログラミングリファレンス

Element インターフェイス

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

Element 継承図

タグエレメントと属性

 タグの属性は、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属性は、それぞれAttrEventCSSに分類されます。

 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)概要分類
.assignedSlotDOM Shadowに関するHTMLSlotElementを返すDOM Shadow
.attributesエレメントの属性リスト NamedNodeMapを返す属性
.childElementCount子エレメントの数子エレメント
.children子エレメントを返す子エレメント
.classListclass属性のリスト DOMTokenListを返す属性
.classNameclass属性値(class名)の取得と設定。DOMString 型属性
.clientHeightエレメント内部の高さ、Number 型サイズ
.clientLeftエレメント内部の左端からの位置、Number 型サイズ
.clientTopエレメント内部の上端からの位置、Number 型サイズ
.clientWidthエレメント内部の幅、Number 型サイズ
.firstElementChild最初の子エレメント子エレメント
.idid属性値(id名)の取得と設定。DOMString 型属性
.innerHTMLエレメント内部のHTML、XMLテキストの取得と設定。DOMString 型。テキストのみはHTMLElement.innerTextHTML、XMLテキスト
.lastElementChild子エレメントの中で最後のエレメント子エレメント
.localNameXMLテキストでの修飾名におけるローカル部分 <data:example >XML
.namespaceURIXMLテキストやSVGなどでの名前空間の URIXML
.nextElementSibling直後の兄弟エレメント。Element 型兄弟エレメント
.outerHTMLエレメントのHTML、XMLテキスト。取得と設定。DOMString 型HTML、XMLテキスト
.partDOM Shadowに関するpart属性をもつエレメントのリストの取得と設定 DOMTokenListDOM Shadow
.prefixXMLテキストでの修飾名における接頭辞 DOMString型 <data:example >XML
.previousElementSibling直前の兄弟エレメント。Element 型兄弟エレメント
.scrollHeightスクロールビューにおける高さ Number 型スクロール
.scrollLeftスクロールビューにおける、見えている左端が全体の左端からどの位置かの取得と設定 Number 型スクロール
.scrollTopスクロールビューにおける、見えている上端が全体の上端からどの位置かの取得と設定 Number 型スクロール
.scrollWidthスクロールビューにおける見えている幅? Number 型スクロール
.shadowRootDOM 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()エレメントが1つ以上の属性を持っているかを 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 ミックスインも継承しています。