Slide 14.10: HTML DOM node trees

Slide 14.9: HTML DOM node trees
Slide 14.11: HTML DOM properties and methods
Home Print version

HTML DOM Node Trees (Cont.)

The HTML DOM views an HTML document as a node-tree. All the nodes in the tree have relationships to each other.

Node Parents, Children, and Siblings (Cont.)
From the HTML script below:

The <html> node has no parent node; it is the root node.
The parent node of the <head> and <body> nodes is the <html> node.
The parent node of the “Hello world!” text node is the <p> node.

 <html>
  <head>
   <title>DOM Tutorial</title>
  </head>
  <body>
   <h1>DOM Lesson one</h1> 
   <p>Hello world!</p>
  </body>
 </html>

and

The <html> node has two child nodes: <head> and <body>.

The <head> node has one child node: the <title> node.

The <title> node also has one child node: the text node “DOM Tutorial.”

The <h1> and <p> nodes are siblings, and both child nodes of <body>.

First Child and Last Child
From the HTML above:

The <head> element is the first child of the <html> element, and the <body> element is the last child of the <html> element.

The <h1> element is the first child of the <body> element, and the <p> element is the last child of the <body> element.

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


<html> <head> <script type="text/javascript"> function getEventType(event) { alert(event.type); } </script> </head> <body onmousedown="getEventType(event)"> <p>Click in the document. An alert box will tell what type of event that was triggered.</p> </body> </html>

Slide 14.9: HTML DOM node trees
Slide 14.11: HTML DOM properties and methods
Home Print version

▶
Next

My girlfriend told me she was leaving me because
I keep pretending to be a Transformer.
I said, “No, wait! I can change.”