Chapter 3. Element Nodes
3.1 HTML*Element Object Overview
Each element in an HTML document has a unique nature, and as such,
each has a unique JavaScript
constructor that instantiates the element as a node object in a
DOM tree. For example, an <a>
element is created
as a DOM node from the HTMLAnchorElement()
constructor.
In the following code, I verify that an anchor element is created from
HTMLAnchorElement()
.
<!DOCTYPE html> <html lang="en"> <body> <a></a> <script> /* grab <a> element node from DOM and ask for the name of the constructor that constructed it */ console.log(document.querySelector('a').constructor); //logs function HTMLAnchorElement() { [native code] } </script> </body> </html>
In the preceding code example, I am trying to make the point that each element in the DOM is constructed from a unique JavaScript interface/constructor. The following list should give you a good sense of the interfaces/constructors used to create HTML elements.
HTMLHtmlElement | HTMLParagraphElement |
HTMLHeadElement | HTMLHeadingElement |
HTMLLinkElement | HTMLQuoteElement |
HTMLTitleElement | HTMLPreElement |
HTMLMetaElement | HTMLBRElement |
HTMLBaseElement | HTMLBaseFontElement |
HTMLIsIndexElement | HTMLFontElement |
HTMLStyleElement | HTMLHRElement |
HTMLBodyElement | HTMLModElement |
HTMLFormElement | HTMLAnchorElement |
HTMLSelectElement | HTMLImageElement |
HTMLOptGroupElement | HTMLObjectElement |
HTMLOptionElement | HTMLParamElement |
HTMLInputElement | HTMLAppletElement |
HTMLTextAreaElement | HTMLMapElement |
HTMLButtonElement | HTMLAreaElement |
HTMLLabelElement | HTMLScriptElement ... |
Get DOM Enlightenment now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.