HTML要素とHTML DOM APIインタフェースの対応
公開日:
カテゴリ: JavaScript
HTML要素とHTML DOM APIインタフェース(クラス)の対応をまとめてみました。
素のHTMLやJavaScriptを使用している場合はWeb Componentを作成しない限り触る機会は無さそうですが、TypeScriptを使っていると触れる機会がそこそこあるので、対応するクラスの検索表を用意してみました。
HTMLElement
HTML要素の親となるインタフェースです。すべてのHTML要素は、このHTMLElementインタフェース(クラス)を継承して作成されています。
HTMLElement自体は以下のオブジェクト・クラスを継承しています。
Object
└ EventTarget
└ Node
└ Element
└ HTMLElementタグと対応するHTML DOM APIインタフェース
括弧内は現在非推奨となっているHTML要素です。HTMLタグの後ろに*がついているものは実験中のHTML要素です。
| HTML DOM APIインタフェース | HTMLタグ |
|---|---|
| HTMLAnchorElement | <a> |
| HTMLAreaElement | <area> |
| HTMLBRElement | <br> |
| HTMLBaseElement | <base> |
| HTMLBodyElement | <body> |
| HTMLButtonElement | <button> |
| HTMLCanvasElement | <canvas> |
| HTMLDListElement | <dl> |
| HTMLDataElement | <data> |
| HTMLDataListElement | <datalist> |
| HTMLDetailsElement | <details> |
| HTMLDialogElement | <dialog> |
| HTMLDirectoryElement | (<dir>) |
| HTMLDivElement | <div> |
| HTMLEmbedElement | <embed> |
| HTMLFencedFrameElement | <fencedframe>* |
| HTMLFieldSetElement | <fieldset> |
| HTMLFontElement | (<font>) |
| HTMLFormElement | <form> |
| HTMLFrameElement | (<frame>) |
| HTMLFrameSetElement | (<frameset>) |
| HTMLHRElement | <hr> |
| HTMLHeadElement | <head> |
| HTMLHeadingElement | <h1>, <h2>, <h3>, <h4>, <h5>, <h6> |
| HTMLHtmlElement | <html> |
| HTMLIFrameElement | <iframe> |
| HTMLImageElement | <img> |
| HTMLInputElement | <input> |
| HTMLLIElement | <li> |
| HTMLLabelElement | <label> |
| HTMLLegendElement | <legend> |
| HTMLLinkElement | <link> |
| HTMLMapElement | <map> |
| HTMLMarqueeElement | (<marquee>) |
| HTMLMenuElement | <menu> |
| HTMLMetaElement | <meta> |
| HTMLMeterElement | <meter> |
| HTMLModElement | <del>, <ins> |
| HTMLOListElement | <ol> |
| HTMLObjectElement | <object> |
| HTMLOptGroupElement | <optgroup> |
| HTMLOptionElement | <option> |
| HTMLOutputElement | <output> |
| HTMLParagraphElement | <p> |
| HTMLParamElement | (<param>) |
| HTMLPictureElement | <picture> |
| HTMLPreElement | <pre>, (<xmp>) |
| HTMLProgressElement | <progress> |
| HTMLQuoteElement | <blockquote>, <q> |
| HTMLScriptElement | <script> |
| HTMLSelectElement | <select> |
| HTMLSelectedContentElement | <selectedcontent>* |
| HTMLSlotElement | <slot> |
| HTMLSourceElement | <source> |
| HTMLSpanElement | <span> |
| HTMLStyleElement | <style> |
| HTMLTableCaptionElement | <caption> |
| HTMLTableCellElement | <td>, <th> |
| HTMLTableColElement | <col>, <colgroup> |
| HTMLTableElement | <table> |
| HTMLTableRowElement | <tr> |
| HTMLTableSectionElement | <tbody>, <tfoot>, <thead> |
| HTMLTemplateElement | <template> |
| HTMLTextAreaElement | <textarea> |
| HTMLTimeElement | <time> |
| HTMLTitleElement | <title> |
| HTMLTrackElement | <track> |
| HTMLUListElement | <ul> |
HTMLElement
特にHTMLElementを継承したインタフェース・クラスを定義せずHTMLElement自体を使用している要素です。そのため、要素が固有の機能を持ちません。
コンテンツの区分付け要素
<address>, <article>, <aside>, <footer>, <header>, <hgroup>, <main>, <nav>, <search>, <section>
インラインの意味付け/スタイル付け要素
<abbr>, <b>, <bdi>, <bdo>, <cite>, <code>, <dfn>, <em>, <i>, <kbd>, <mark>, <rp>, <rt>, <ruby>, <s>, <samp>, <small>, <strong>, <sub>, <sup>, <u>, <var>, <wbr>
その他
<dd>, <dt>, <figcaption>, <figure>, <noscript>, <summary>
廃止・非推奨
(<acronym>, <big>, <center>, <nobr>, <noembed>, <noframes>, <plaintext>, <rb>, <rtc>, <strike>, <tt>)
HTMLMediaElement
以下の要素はHTMLMediaElementを継承した要素です。HTMLMediaElementはHTMLElementを継承していますが、HTMLMediaElement自体に対応するHTML要素は今のところ存在しません。
| HTML DOM APIインタフェース | HTMLタグ |
|---|---|
| HTMLAudioElement | <audio> |
| HTMLVideoElement | <video> |
カスタム要素
window.customElementsでWeb Componentsとして要素を定義すると、定義したクラス(HTMLElementを継承したもの)で要素を作成することができるようになります。
HTMLUnknownElement
組み込みで定義されていない(上記に載っていない)要素、かつカスタム要素として定義していないHTML要素はHTMLUnknownElementの要素となります。
HTMLUnknownElementはHTMLElementを継承しているため、一応HTML要素として扱えますが、特に独自のプロパティや関数を持ちません。
カテゴリ: JavaScript