DOM Elements

This page learns you how to get and access HTML elements in an HTML web page.

Finding HTML Elements

In regular practice with JavaScript, you want to manipulate HTML elements.

To do the same, find the elements first. There are many ways to do this:

• Getting HTML elements by id
• Getting HTML elements by tag name
• Getting HTML elements by class name
• Getting HTML elements by CSS selectors
• Getting HTML elements by HTML object collections

Getting HTML Element by Id

The simplest way to get an HTML element in the DOM, is by using the element id.

var myElem = document.getElementById("name");

If the element is found, the method will return the element as an object (in myElem).

If the element is not found, myElem will be having null.

Getting HTML Elements by Tag Name

This example finds all <div> elements:

var myTag = document.getElementsByTagName("div");

The below example finds the element with id="mainTag", and then finds all <div> elements inside "mainTag":

var myElem = document.getElementById("mainTag");

var myTag = myElem.getElementsByTagName("div");

Getting HTML Elements by Class Name

If want to get all HTML elements with the same class name, use getElementsByClassName().

The below example returns a list of all elements with class="name".

var myClass = document.getElementsByClassName("name");

Note:- Getting elements by class name does not work in Internet Explorer 8 and earlier versions.

Getting HTML Elements by CSS Selectors

If want to get all HTML elements that have a specified CSS selector (id, class names, types, attributes, values of attributes, etc), use the querySelectorAll() method.

The below example returns a list of all <p> elements with class="name".

var x = document.querySelectorAll("p.name");

Note:- The querySelectorAll() method does not work in Internet Explorer 8 and earlier versions

Getting HTML Elements by HTML Object Collections

The below example gets the form element with id="myForm", in the forms collection, and displays all element values:

Input:-

Output (Before Click):-

Output (After Click):-

Below HTML objects (and object collections) are also accessible:

• document.anchors
• document.body
• document.documentElement
• document.embeds
• document.forms
• document.head
• document.images
• document.links
• document.scripts
• document.title