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 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. 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. 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. Notice that all the spacing must be removed between the elements within the element in order for the firstChild and lastChild properties to access the correct elements that you want to select and style. This is what the document looks like when previewed in a browser. Notice that just the first and last links in the navigation are bold. This is an example of using the DOM to make a change to existing elements within the document. This method of selecting elements is almost never used. It’s too prone to mistakes and too difficult to interpret and use.<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>
<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>
<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>
