O'Reilly logo

DOM Enlightenment by Cody Lindley

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required