HTML DOM Access Nodes
With the DOM, you can access every node in an HTML document.
Accessing Nodes
You can access a node in three ways:
1. By using the getElementById() method
2. By using the getElementsByTagName() method
3. By navigating the node tree, using the node relationships.
The getElementById() Method
The getElementById() method returns the element with the specified ID:
Syntax
|
node.getElementsById("id");
|
The following example gets the element with id="intro":
Example
|
document.getElementById("intro");
|
|
Note: The getElementById() method doesn't work in XML.
The getElementsByTagName() Method
getElementsByTagName() returns all elements with a specified tag name.
Syntax
|
node.getElementsByTagName("tagname");
|
The following example returns a nodeList of all <p> elements in the document:
Example 1
|
document.getElementsByTagName("p");
|
|
The following example returns a nodeList of all <p> elements that are descendants of
the element with id="main":
Example 2
|
document.getElementById('main').getElementsByTagName("p");
|
|
DOM Node List
The getElementsByTagName() method returns a node-list. A node-list is an
array of nodes.
The following code selects all <p> nodes in a node-list:
Example
|
x=document.getElementsByTagName("p");
|
The nodes can be accessed by index number. To access the
second <p> you can write:
|
Note: The index starts at 0.
You will learn more about node-lists in a later chapter of this tutorial.
DOM Node List Length
The length property defines the number of nodes in a node-list.
You can loop through a node-list by using the length property:
Example
x=document.getElementsByTagName("p");
for (i=0;i<x.length;i++)
{
document.write(x[i].innerHTML);
document.write("<br />");
}
|
|
Example explained:
- Get all <p> element nodes
- For each <p> element, output the value of its text node
Navigating Node Relationships
The three properties; parentNode, firstChild,
and lastChild, follow the document structure and allow short-distance travel in
a document.
Look at the following HTML fragment:
<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.
Furthermore, the <body> is the parent (parentNode) of the every p element.
The firstChild property can also be used to access the text of an element:
Example
<html>
<body>
<p id="intro">Hello World!</p>
<script type="text/javascript">
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>
<html>
<body> |
|
DOM Root Nodes
There are two special document properties that allow access to the tags:
- document.documentElement - returns the root node of the document
- document.body - gives direct access to the <body> tag
Try
it yourself
Reliable, Affordable, Feature-Rich Web Hosting!
Take the uncertainty out of Web hosting and let
GoDaddy.com put service, performance and value back in. No matter which
hosting type or plan you choose, your site receives 24/7
maintenance and protection in our world-class data center. Plus,
you get the expert, friendly service you deserve, from the
world's largest hostname provider.
With three plans to choose from and
prices starting at just $4.99 per month, GoDaddy.com is sure to have a plan that's
right-sized and right-priced just for you!
All plans feature FREE 24x7 setup, FREE 24x7 monitoring, best-
of-breed routers, firewalls and servers, 24x7 onsite physical security
and access to our exclusive Go Daddy Hosting Connection, THE place
to install over 30 FREE applications. Virtual Dedicated and Dedicated
Server plans also available.
Visit GoDaddy.com today.
Virtual Dedicated, Dedicated Server and unlimited plans also available.
Save 20% on 12 months or more of shared web hosting - Enter code w3s20off at checkout
| 
