Element インターフェイス
Element インターフェイスは、HTML と XML タグエレメントをオブジェクト化するためのインターフェイス（クラス、設計書）です。インターフェイスに基づいてオブジェクト化(正確にはインスタンス化)されます。
例えば、HTML ページの <html> 以内のタグエレメントは DOM に基づいて Element インターフェイスを継承したオブジェクトに変換されます。
- EventTarget
- └─ Node
- ├─ Document
- └─ Element
- └─ HTMLElement
- └─ HTMLHeadElement、HTMLBodyElement...など
- └─ HTMLElement
- └─ Node
タグエレメントと属性
タグの属性は、Attrオブジェクト、イベントハンドラー、スタイルに分類されます。 スタイルは CSS , <style> に関する属性です。
<p class="example_p" onclick="func_Example()" style="border:1px solid silver;">
<p>タグは Element です。 class属性、onclick属性、style属性は、それぞれAttr、Event、CSSに分類されます。
styleなどはCSS Object Modelによって変換されます。CSS Object ModelはDOMとは別仕様ですが、スクリプトから操作が可能です。
JavaScriptからCSS、style属性を操作する方法は以下のような構文を使います。ElementはHTMLエレメントです。***にプロパティ名が入ります。
var re_val = Element.style.***;
Element インスタンスの生成
Element インスタンスは Document.createElement() メソッド によって生成します。 例えば以下のように記述します。
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 ミックスインも継承しています。
- ad -