HOME

HTML DOM
DOM HOME
DOM Intro
DOM Nodes
DOM Node Tree
DOM Node Access
DOM Node Info
DOM How To
DOM Reference
DOM Summary

DOM Examples
DOM Examples

DOM Objects
DOM Window
DOM Navigator
DOM Screen
DOM History
DOM Location

DOM Document

DOM Anchor
DOM Area
DOM Base
DOM Body
DOM Button
DOM Event
DOM Form
DOM Frame
DOM Frameset
DOM IFrame
DOM Image
DOM Input Button
DOM Input Checkbox
DOM Input File
DOM Input Hidden
DOM Input Password
DOM Input Radio
DOM Input Reset
DOM Input Submit
DOM Input Text
DOM Link
DOM Meta
DOM Object
DOM Option
DOM Select
DOM Style
DOM Table
DOM TableCell
DOM TableRow
DOM Textarea

Selected Reading
Web Statistics
Web Glossary
Web Hosting
Web Quality

W3Schools Forum

Helping W3Schools

HTML DOM Access Nodes

With the DOM, you can access every node in an HTML document.

Find and Access Nodes

You can find the element you want to manipulate in several ways:

By using the getElementById() and getElementsByTagName() methods
By using the parentNode, firstChild, and lastChild properties of an element node

getElementById() and getElementsByTagName()

The two methods getElementById() and getElementsByTagName(), can find any HTML element in the entire document.

These methods ignore the document structure. If you want to find all elements in the document, the getElementsByTagName() method will find them all, regardless of on which level the elements are. Furthermore, the getElementById() method always returns the correct element, wherever it is hidden in the document structure.

These two methods give you the HTML elements you need regardless of where they are in the document!

The getElementById() method returns the element with the specified ID:

getElementById() Syntax

document.getElementById("someID");

Note: The getElementById() method doesn't work in XML. In an XML document, you must search through attributes that have the type id, and this type must be declared in the XML document's Document Type Definition (DTD).

The getElementsByTagName() method returns all elements (as a nodeList) with the specified tag name that are descendants of the element you are on when using this method.

The getElementsByTagName() can be used on any HTML element, and also on the document:

getElementsByTagName() Syntax

document.getElementsByTagName("tagname");

or:

document.getElementById('someID').getElementsByTagName("tagname");

Example 1

The following example returns a nodeList of all elements in the document:

document.getElementsByTagName("p");

Example 2

The following example returns a nodeList of all elements that are descendants of the element with id="maindiv":

document.getElementById('maindiv').getElementsByTagName("p");

nodeList

When working with a nodeList, we usually store the list in a variable, like this:

var x=document.getElementsByTagName("p");

Now the variable x contains a list of all elements in the page, and we can access the elements by their index numbers.

Note: The index starts at 0.

You can loop through the nodeList by using the length property:

var x=document.getElementsByTagName("p");
for (var i=0;i<x.length;i++)
  { 
  // do something with each paragraph
  }

You can also access a specific element by using the index number.

To access the third you can write:

var y=x[2];

parentNode, firstChild, and lastChild

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

Look at the following HTML fragment:

<table>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>Alaska</td>
  </tr>
</table>

In the HTML code above, the first <td> is the firstChild of the <tr> element, and the last <td> is the lastChild of the <tr> element.

Furthermore, the <tr> is the parentNode of every <td> element.

The most common use of firstChild is to access the text of an element:

var x=[a paragraph];

var text=x.firstChild.nodeValue;

The parentNode property is often used to change the document structure. Suppose you want to remove the node with id="maindiv" from the document:

var x=document.getElementById("maindiv");
x.parentNode.removeChild(x);

First you find the node with the specified id, then you move to its parent and execute the removeChild() method.

Root Nodes

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

document.documentElement
document.body

The first property returns the root node of the document and exists in all XML and HTML documents.

The second property is a special addition for HTML pages, and gives direct access to the <body> tag.

Jump to: Top of Page or HOME or Printer friendly page

W3Schools provides material for training only. We do not warrant the correctness of its contents. The risk from using it lies entirely with the user. While using this site, you agree to have read and accepted our terms of use and privacy policy.

W3Schools was converted to XHTML in December 1999