HTML DOM Access

Access HTML DOM - Find HTML elements.

Access HTML elements (nodes)

Accessing HTML elements is equivalent to accessing nodes

You can access HTML elements in different ways:

  • By using the getElementById() method

  • By using the getElementsByTagName() method

  • By using the getElementsByClassName() method

getElementById() method

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

Grammar

node.getElementById("id");

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

Example

document.getElementById("intro");

Try It! 

getElementsByTagName() method

getElementsByTagName() returns all elements with the specified tag name.

Grammar

node.getElementsByTagName("tagname");

The following example returns a list containing all <p> elements in the document:

Example 1

document.getElementsByTagName("p");

Try It! 

The following example returns a list containing all <p> elements in the document that should be descendants (children, grandchildren, etc.) of the element with id="main":

Example 2

document.getElementById("main").getElementsByTagName("p");

Try It! 

The getElementsByClassName() Method

If you want to find all HTML elements with the same class name, use this method:

document.getElementsByClassName("intro");

The above example returns a list of all elements with class="intro":

Note: getElementsByClassName() does not work in Internet Explorer 5,6,7,8.