12.2. Modeling a Document: DOM Nodes and Trees

As we saw in previous chapters, the document’s getElementById method is the simplest way to access a specific element in a page. The method returns objects called DOM nodes. Every piece of an HTML5 page (elements, attributes, text, etc.) is modeled in the web browser by a DOM node. All the nodes in a document make up the page’s DOM tree, which describes the relationships among elements. Nodes are related to each other through child-parent relationships. An HTML5 element inside another element is said to be its child—the containing element is known as the parent. A node can have multiple children but only one parent. Nodes with the same parent node are referred to as siblings.

Today’s desktop browsers provide developer tools that can display a visual representation of a document’s DOM tree. Figure 12.1 shows how to access the developer tools for each of the desktop browsers we use for testing web apps in this book. For the most part, the developer tools are similar across the browsers. [Note: For Firefox, you must first install the DOM Inspector add-on from https://addons.mozilla.org/en-US/firefox/addon/dom-inspector-6622/. Other developer tools are available in the Firefox menu’s Web Developer menu item, and more Firefox web-developer add-ons are available from https://addons.mozilla.org/en-US/firefox/collections/mozilla/webdeveloper/.]