Categories
JavaScript Tutorials

Node Relationships

Functions
Objects
Array Properties and Methods
DOM
Built-in Objects
Using Events in JavaScript
Handling Input and Output
Ajax and JSON

HTML DOM trees resemble family trees in the hierarchical relationship between nodes. In fact, the technical terms used 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 <p> element in a document as p[0], and the second <p> 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 the code below, the three <p> elements are all children of the <section> element. Because they have the same parent, they are siblings. 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.

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

First

Second

Third

Listing 10-3 is an HTML document containing a script that outputs all the child nodes of the section element.

Listing 10-3: Displaying 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 = document.body.childNodes[1].childNodes;
      for (i = 0; i < myNodelist.length; i++){
        document.write (myNodelist[i] + "<br>");
      }
    </script>
  </body>
</html>

First

Second

Third

Nodes in the section element

[object Text]
[object Comment]
[object Text]
[object HTMLParagraphElement]
[object Text]
[object Comment]
[object Text]
[object HTMLParagraphElement]
[object Text]
[object Comment]
[object Text]
[object HTMLParagraphElement]
[object Text]
[object Comment]
[object Text]

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

  • firstElementChild: References the first child element of a node
  • lastElementChild: References the last child element of the node
  • nextElementSibling: References the next element with the same parent node
  • previousElementSibling: References the previous element with the same parent node

Listing 10-4 shows how you can use these relative properties to traverse the DOM.

Listing 10-4: Using firstElementChild and lastElementChild to highlight paragraph elements:

<html>
  <head>
    <title>firstElementChild and lastElementChild</title>
  </head>
  <body>
    <div>
      <p>Hello world</p>
      <p>Good morning</p>
      <p>Have a nice day</p>
	  </div>
	  <script>
      document.body.firstElementChild.firstElementChild.style.color = 'red';
      document.body.firstElementChild.lastElementChild.style.color = 'red';
	  </script>
  </body>
</html>

Hello world

Good morning

Have a nice day

Here, document.body.firstElementChild refers to the div element which is the first child element of the body element.

So, document.body.firstElementChild.firstElementChild refers to the first paragraph element which is the first child element of the div element. So, this way the DOM elements can be accessed and the desired properties can be modified.

Examples

Create three h1 elements and change the font size of the first h1 element.

<html>
  <head></head>
  <body>
    <div>
      <h1>Hello world</h1>
      <h1>Good morning</h1>
      <h1>Have a nice day</h1>
	  </div>
	  <script>
	    document.body.firstElementChild.firstElementChild.style.fontSize = '20px';
	  </script>
  </body>
</html>

Hello world

Good morning

Have a nice day

Create five paragraph elements and change the background color of the last element.

<html>
  <head></head>
  <body>
    <div>
      <p>Hello world</p>
      <p>Good morning</p>
      <p>Have a nice day</p>
      <p>See you tomorrow</p>
      <p>Good bye</p>
	  </div>
	  <script>
	    document.body.firstElementChild.lastElementChild.style.backgroundColor = 'yellow';
	  </script>
  </body>
</html>

Hello world

Good morning

Have a nice day

See you tomorrow

Good bye