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().

Live code

<!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.

HTMLHtmlElementHTMLParagraphElement
HTMLHeadElementHTMLHeadingElement
HTMLLinkElementHTMLQuoteElement
HTMLTitleElementHTMLPreElement
HTMLMetaElementHTMLBRElement
HTMLBaseElementHTMLBaseFontElement
HTMLIsIndexElementHTMLFontElement
HTMLStyleElementHTMLHRElement
HTMLBodyElementHTMLModElement
HTMLFormElementHTMLAnchorElement
HTMLSelectElementHTMLImageElement
HTMLOptGroupElementHTMLObjectElement
HTMLOptionElementHTMLParamElement
HTMLInputElementHTMLAppletElement
HTMLTextAreaElementHTMLMapElement
HTMLButtonElementHTMLAreaElement
HTMLLabelElementHTMLScriptElement ...

Get DOM Enlightenment now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.