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クラスで使うことができます。
- EventTarget
- └── Node
- └── Element
- └── Node
- 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 |
関連(Related)
HTML、CSS、DOMのHTMLエレメント、Windowに関する用途一覧です。
HTML
CSS
- サイズ
-
- height、 width、 max-height、 max-width、 min-height、 min-width、 resize
- スクロール追加
- overflow、 overflow-x、 overflow-y
- マージン、パディング、ボーダー
-
- 共通
- box-sizing、 display
- マージン
- margin、 margin-bottom、 margin-left、 margin-right、 margin-top
- パディング
- padding、 padding-bottom、 padding-left、 padding-right、 padding-top
- ボーダー、罫線
-
- 全体
- border、 border-collapse、 border-color、 border-spacing、 border-style、 border-width
- 上辺
- border-top、 border-top-color、 border-top-left-radius、 border-top-right-radius、 border-top-style、 border-top-width
- 下辺
- border-bottom、 border-bottom-color、 border-bottom-left-radius、 border-bottom-right-radius、 border-bottom-style、 border-bottom-width
- 左辺
- border-left、 border-left-color、 border-left-style、 border-left-width
- 右辺
- border-right、 border-right-color、 border-right-style、 border-right-width
- 角を丸に
- border-radius
- 画像を線に
- border-image、 border-image-outset、 border-image-repeat、 border-image-slice、 border-image-source、 border-image-width
- アウトライン
- outline、 outline-color、 outline-offset、 outline-style、 outline-width
- 配置
-
- 位置調整
- bottom、 left、 right、 top、 position、 z-index
- 横並び(フレックス)
- display:flex;、 align-content、 align-items、 align-self、 justify-content、 flex-wrap、 flex-basis、 flex-direction、 flex-flow
- 配列(グリッド)
- display:grid;、 grid-area、 grid-auto-columns、 grid-auto-flow、 grid-auto-rows、 grid-column、 grid-column-end、 grid-column-gap、 grid-column-start、 grid-gap、 grid-row、 grid-row-end、 grid-row-gap、 grid-row-start、 grid-template、 grid-template-areas、 grid-template-columns、 grid-template-rows、
- フレックス、グリッドの共通 横並び順
- order
- 背景
- background、 background-attachment、 background-blend-mode、 background-clip、 background-color、 background-image、 background-origin、 background-position、 background-repeat、 background-size、 linear-gradient、 radial-gradient
- フィルタ、加工
-
- filter、 transform、 transform-origin
- ブレンド
- isolation、 linear-gradient()、 mix-blend-mode、 radial-gradient()
- 影
- box-shadow
- 透過
- opacity
- 回転
- backface-visibility、
- 立体
- perspective、 perspective-origin
- 切り取り
- clip-path
- カラム
- column-fill、 column-gap、 column-rule、 column-rule-color、 column-rule-style、 column-rule-width、 column-span、 column-width、 columns
- ページ内移動
- scroll-behavior
- 表示、非表示
- visibility
DOM
HTMLエレメント
- インターフェース、クラス
- Document、 Element、 FocusEvent、 Attr
- イベント
- blur、 focus、 focusin、 focusout、 load、 resize、 scroll、 toggle
- プロパティ
- メソッド
Window
- インターフェース
- HashChangeEvent、 PageTransitionEvent、 Window
- イベント
- beforeunload、 hashchange、 load、 pagehide、 pageshow、 unload
- プロパティ
- newURL、 oldURL、 persisted
- メソッド
- clearTimeout()、 setTimeout()