ELementインターフェイス
Elementインターフェイスとは、HTMLタグエレメントがDOMによってオブジェクト化されるインターフェイス（設計書）です。 HTMLページの<html>以内のエレメントはすべてDOMによってElementオブジェクトに変換されます。
ブラウザによってwebページが読み込まれると、インターフェイスと呼ばれる設計書に従ってページ内容がオブジェクト化されます。
HTMLタグエレメントはElementオブジェクトに変換されます。
ElementオブジェクトのルートオブジェクトがDocumentオブジェクトです。Documentオブジェクトは<html>に該当しますが、<html>自体ではないようです。
タグの属性はAttrオブジェクトに変換されます。styleなどはCSS Object Modelによって変換されます。CSS Object ModelはDOMとは別仕様で扱われますが、スクリプトから操作が可能です。
コンストラクタによって任意にオブジェクトを生成することもできます。
ElementインターフェイスはNode、ParentNodeインターフェイスを継承しています。そのためにNode、ParentNodeインターフェイスのプロパティとメソッドがElementインターフェイスで使うことができます。
- Nodeインターフェイス
-
- プロパティ
- baseURI、baseURIObject、childNodes、firstChild、isConnected、lastChild、nextSibling、nodeName、nodePrincipal、nodeType、nodeValue、ownerDocument、parentNode、parentElement、previousSibling、textContent
- メソッド
- appendChild()、cloneNode()、compareDocumentPosition()、contains()、getRootNode()、hasChildNodes()、insertBefore()、isDefaultNamespace()、isEqualNode()、isSameNode()、lookupPrefix()、lookupNamespaceURI()、normalize()、removeChild()、replaceChild()
- ParentNodeインターフェイス
-
- プロパティ
- childElementCount、children、firstElementChild、lastElementChild
- メソッド
プロパティ(Properties)
| attributes | |
| classList | |
| className | |
| clientHeight | |
| clientLeft | |
| clientTop | |
| clientWidth | |
| computedName | |
| computedRole | |
| id | |
| innerHTML | |
| localName | |
| namespaceURI | |
| nextElementSibling ( NonDocumentTypeChildNode ) | |
| outerHTML | |
| part | |
| prefix | |
| previousElementSibling ( NonDocumentTypeChildNode ) | |
| scrollHeight | |
| scrollLeft | |
| scrollLeftMax | |
| scrollTop | |
| scrollTopMax | |
| scrollWidth | |
| shadowRoot | |
| openOrClosedShadowRoot | |
| slot | |
| tabStop | |
| tagName | |
| undoManager | |
| undoScope |
| assignedSlot ( Slotable ) |
メソッド(Methods)
| addEventListener() ( EventTarget ) | |
| attachShadow() | |
| animate() | |
| closest() | |
| createShadowRoot() | |
| computedStyleMap() | |
| dispatchEvent() (EventTarget) | |
| getAnimations() | |
| getAttribute() | |
| getAttributeNames() | |
| getAttributeNS() | |
| getAttributeNode() | |
| getAttributeNodeNS() | |
| getBoundingClientRect() | |
| getClientRects() | |
| getElementsByClassName() | |
| getElementsByTagName() | |
| getElementsByTagNameNS() | |
| hasAttribute() | |
| hasAttributeNS() | |
| hasAttributes() | |
| hasPointerCapture() | |
| insertAdjacentElement() | |
| insertAdjacentHTML() | |
| insertAdjacentText() | |
| matches() | |
| pseudo() | |
| querySelector() | |
| querySelectorAll() | |
| releasePointerCapture() | |
| ChildNode.remove() | |
| removeAttribute() | |
| removeAttributeNS() | |
| removeAttributeNode() | |
| removeEventListener() ( EventTarget ) | |
| requestFullscreen() | |
| requestPointerLock() | |
| scroll() | |
| scrollBy() | |
| scrollIntoView() | |
| scrollTo() | |
| setAttribute() | |
| setAttributeNS() | |
| setAttributeNode() | |
| setAttributeNodeNS() | |
| setCapture() | |
| setPointerCapture() | |
| toggleAttribute() |
Eventタイプ(Event Types)
Elementに設定できるEventタイプは以下が定義されています。
Eventタイプは、Document,Elemet,Windowにon～=function()やaddEventListener()メソッドによってEventハンドラーとして設定できます。
Document,Elemet,WindowにEventハンドラーが設定されると、ブラウザがユーザーやブラウザ内の変化を監視します。
EventについてはEventインターフェイスに定義されています。そのEventを呼び出しはEventTargetが担っています。
| Event type | イベント発生の条件 |
|---|---|
| onabort | <audio>または<video>メディアデータのダウンロードが中止されたら |
| afterprint 未対応ブラウザあり | 印刷時ダイアログが閉じ、印刷開始前 |
| beforeprint 未対応ブラウザあり | 印刷ダイアログが表示される前 |
| onbeforeunload | 現在のドキュメント（webページ）を閉じるや他のページに移動する |
| oncanplay | <audio>または<video>メディアが開始するのに十分なバッファリングができたら |
| oncanplaythrough | <audio>または<video>メディアのバッファリングで停止することなく再生できると推定できたら |
| onchange | タグエレメントの値が変化したら |
| onerror | 外部ファイルのロード中にエラーが起きると |
| fullscreenchange | |
| fullscreenerror | |
| oninput | 入力があったら |
| invalid | |
| onload | ロードが起きたら |
| onloadeddata | フレームの再生において十分なデータがロードされなかったら |
| onloadedmetadata | メタデータがロードされたら |
| message | |
| offline | |
| online | |
| open | |
| onpause | <audio>,<video>メディアを一時停止したら |
| onplay | メディアが再生されたら |
| onplaying | バッファリングのために一時停止または停止した後に再生を再開すると |
| onprogress | メディアデータのダウンロードの間に |
| onratechange | 再生速度が変更されたら |
| onresize | ブラウザのWindowのサイズを変更したら |
| onreset | <form>エレメントがリセットされたら |
| onscroll | スクロールバーを操作したら |
| search | |
| onseeked | 再生位置を変更するまたはスキップすると |
| onseeking | 再生位置を変更するまたはスキップすると |
| onselect | エレメント内の幾つかのテキストが選択されたら |
| show | |
| onstalled | メディアデータを取得してもそのデータが利用できないとき |
| onsubmit | 送信を行ったら |
| onsuspend | メディアデータが意図的に取得できないとき |
| ontimeupdate | メディアの再生が中段されたら |
| ontoggle | <detail>エレメントを開くまたは閉じると |
| onunload | webページを遷移する行為、formを送信する、または閉じると |
| onwaiting | メディアで次のフレームのためのバッファーによって中断する |
他のにもElementでは以下のEventタイプが使用できます。
| fullscreenchange | |
| fullscreenerror |