Slide 14.15: HTML DOM accessing nodes (cont.)

HTML DOM Accessing Nodes (Cont.)

Navigating Node Relationships
The three properties, parentNode, firstChild, and lastChild, follow the document structure and allow short-distance travel in a document.

<html>
  <body>
    <p>Hello World!</p>
    <div>
      <p>The DOM is very useful!</p>
      <p>This example demonstrates node relationships.</p>
    </div>
  </body>
</html>

In the HTML code above, the first p element is the first child node (firstChild) of the body element, and the div element is the last child node (lastChild) of the body element.

The parent node (parentNode) of the first p element and the div element, is the the body element, and the parent node of the p elements inside the div element, is the div element. The firstChild property can also be used to access the text of an element:

DOM Root Nodes
There are two special document properties that allow access to the tags:

document.documentElement, which returns the root node of the document
document.body, which gives direct access to the <body> tag

Demonstration
The following demonstration shows how the script of HTML and JavaScript is displayed on the Web.


<html> <body> <p>Hello World!</p> <div> <p>The DOM is very useful!</p> <p>This example demonstrates the <b>document.body</b> property.</p> </div> <script type="text/javascript"> x = document.body; alert( x.innerHTML ); </script> </body> </html>