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

Elementクラス

　Elementクラスとは、HTMLタグエレメントをオブジェクト化するためのクラス（設計書）です。クラスに基づいてオブジェクト化されます。 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ミックスインのプロパティとメソッドがElemenクラスで使うことができます。

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>エレメントを開くまたは閉じると
onunloadwebページを遷移する行為、formを送信する、または閉じると
onwaitingメディアで次のフレームのためのバッファーによって中断する

　他のにもElementでは以下のEventタイプが使用できます。

fullscreenchange
fullscreenerror