Coding with JavaScript For Dummies
Book image
Explore Book Buy On Amazon

HTML DOM trees resemble family trees in the hierarchical relationship between nodes. In fact, the technical terms used by JavaScript programmers to describe relationships between nodes in a tree take their names from familial relationships.

  • Every node, except the root node, has one parent.

  • Each node may have any number of children.

  • Nodes with the same parent are siblings.

Because HTML documents often have multiple elements that are of the same type, the DOM allows you to access distinct elements in a node list using an index number. For example, you can refer to the first

element in a document as p[0], and the second

element node as p[1].

Although a node list may look like an array, it’s not. You can loop through the contents of a node list, but you can’t use array methods on node lists.

In this code, the three

elements are all children of the

element. Because they have the same parent, they are siblings.

<html>
<head>
 <title>The HTML Family</title>
</head>
<body>
 <section> <!-- proud parent of 3 p elements, child of body →
 <p>First</p> <!-- 1st child of section element, sibling of 2 p elements →
 <p>Second</p> <!-- 2nd p child of section element, sibling of 2 p elements →
 <p>Third</p> <!-- 3rd p child of section element, sibling of 2 p elements →
 </section>
</body>
</html>

In the example above, the HTML comments are also children of the section element. The last comment before the closing section tag is called the last child of the section.

By understanding the relationships between document nodes, you can use the DOM tree to find any element within a document.

Here is an HTML document containing a script that outputs all the child nodes of the section element.

<html>
<head>
 <title>The HTML Family</title>
</head>
<body>
 <section> <!-- proud parent of 3 p elements, child of body →
 <p>First</p> <!-- 1st child of section element, sibling of 2 p elements →
 <p>Second</p> <!-- 2nd p child of section element, sibling of 2 p elements →
 <p>Third</p> <!-- 3rd p child of section element, sibling of 2 p elements →
 </section>
 <h1>Nodes in the section element</h1>
 <script>
 var myNodelist = <br/>document.body.childNodes[1].childNodes;
 for (i = 0; i < myNodelist.length; i++){
  document.write (myNodelist[i] + "<br>");
 }
 </script>
</body>
</html>

This is what the output of this code looks like in a browser. Notice that the first child node of the section element is a text node. If you look closely at the HTML markup, you’ll see that there is a single space between the opening section tag and the comment. Even something as simple as this single space creates an entire node in the DOM tree. This fact needs to be taken into consideration when you’re navigating the DOM using relationships between nodes.

Viewing the output of your code.
Viewing the output of your code.

The HTML DOM also provides a couple keywords for navigating nodes using their positions relative to their siblings or parents. The relative properties are

  • firstChild: References the first child of a node

  • lastChild: References the last child of the node

  • nextSibling: References the next node with the same parent node

  • previousSibling: References the previous node with the same parent node

This example shows how you can use these relative properties to traverse the DOM.

<html>
<head>
 <title>Iguanas Are No Fun</title>
 <script>
 function boldFirstAndLastNav() {
  document.body.childNodes[1].firstChild.style.fontWeight="bold";
  document.body.childNodes[1].lastChild.style.fontWeight="bold";
 }
 </script>
</head>
<body>
 <nav><a href="home.html">Home</a> | <a <br/>href="why.html">Why Are Iguanas No Fun?</a> | <a href="what.html">What Can Be Done?</a> | <a href="contact.html">Contact Us</a></nav>
 <p>Iguanas are no fun to be around. Use the links above to learn more.</p>
 <script>
 boldFirstAndLastNav();
 </script>
</body>
</html>

Notice that all the spacing must be removed between the elements within the

About This Article

This article is from the book:

About the book authors:

Chris Minnick is an accomplished author, trainer, and web developer who has worked on web and mobile projects for both small and major businesses. Eva Holland is an experienced writer and trainer who has designed and taught online, in-person, and video courses. They are cofounders of WatzThis?

This article can be found in the category: