W3Schools.com


  
HOME HTML CSS XML JAVASCRIPT ASP PHP SQL MORE... REFERENCES | EXAMPLES | FORUM | ABOUT

HTML DOM Access Nodes

« Previous Next Chapter »

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.getElementById("id");

The following example gets the element with id="intro":

Example

document.getElementById("intro");

Try it yourself »

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");

Try it yourself »

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");

Try it yourself »

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:

y=x[1];

Try it yourself »

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 />");
}

Try it yourself »

Example explained:

  1. Get all <p> element nodes
  2. 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. 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:

Example

<html>
<body>

<p id="intro">Hello World!</p>

<script type="text/javascript">
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>

</body>
</html>

Try it yourself »


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


« Previous Next Chapter »

Free Online Website Builder - No Downloading Needed

Create a free Flash website with our simple, online web design editing platform. Stunning templates and user-friendly tools make website building easy and fun.

Start Creating your free website now!


Altova® MapForce®
Graphical XML Conversion Tool from the Developers of XMLSpy®

Altova MapForce

Need an easy way to get data into XML, or transform XML to another format? MapForce lets you map XML data to/from any combination of XML, database, flat file, Excel 2007, XBRL, or Web services data. Then it transforms data instantly or auto-generates royalty-free code for recurrent conversions. New features in Version 2011!

  • Easy-to-use, graphical data mapping interface
  • Instant data transformation
  • XSLT 1.0/2.0 and XQuery code generation
  • Java, C#, and C++ code generation
  • Advanced data processing functions
  • Support for all major relational databases including SQL Server, IBM DB2, Oracle, and more
  • Integration with Altova StyleVision for report rendering
  • Visual Studio & Eclipse integration
  • Available in 32-bit and 64-bit versions

Download a fully-functional trial today!

  Altova MapForce

 

WEB HOSTING
Best Web Hosting
PHP MySQL Hosting
Top 10 Web Hosting
UK Reseller Hosting
Web Hosting
Top Web Hosting
$1 Domain Sale
WEB BUILDING
Download XML Editor
FREE Flash Website
6,000+ HTML Templates
Download now (FREE)
Advertise on Google
Stand out on Google search and maps Click Here
W3SCHOOLS EXAMS
Get Certified in:
HTML, CSS, JavaScript, XML, PHP, and ASP
W3SCHOOLS BOOKS
New Books:
HTML, CSS
JavaScript, and Ajax
STATISTICS
Browser Statistics
Browser OS
Browser Display
SHARE THIS PAGE