How to Select Document Elements Using JavaScript?

You have to select the document elements for manipulation of elements of document to complete any task for the document design or action of the document using JavaScript codes.

There are number of ways to select elements to query a document for an element or elements in order to manipulate elements of the document, to obtain or select the element objects that refer to those document elements.

The different ways to select elements to query a document are explained below.

Selecting Elements By ID Attribute

Any of the HTML element can have the unique id attribute within the document. You can select an element based on this unique id with getElementById() method of the document object.

To select any element with id 'elt' you can use the following code.

var elt=document.getElementById('elt');

Selecting Elements By Name Attribute

Name attribute assigns the name of the element and it does not have to be unique. You can select the elements by name using getElementsByName() method.

To select any element with name 'address' you can use the following code.

var addresses=document.getElementsByName("address");

If there is a only one element with a given name, you use the name directly as the document property to assign the value of the element as given below.

To get the element for the from <form name="addresses">, you can use the following code.

var addresses=document.addresses;

Selecting Elements By TagName

You can select any HTML or XML elements by tagName using the getElementsByTagName() method of the document object. To select all <p> elements, you can use the following code.

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

You can select any element with given tagName with specifying the position number according to the order of the document. You can select first <p> element of the document using the following.

var firstpara=document.getElementsByTagName("p")[0];

Also to find all <span> elements inside the first <p> element of document, you can write.

var firstpara=document.getElementsByTagName("p")[0];
var firstparaspans=firstpara.getElementsByTagName("span");

Selecting Elements By CSS Class

It is the another way to select elements from the document. You can select one or more elements with the given class name by using getElementsByClassName() method.

To select elements with ClassName 'color' you can use the following code.

var colors=document.getElementByClassName("color");

If you have to select elements having more than one class name, can do as below.

To select any element with ClassName 'color' and 'design' you can use the following code.

var colors=document.getElementByClassName("color design");

Selecting Elements By CSS Selectors

You can also select document elements with specifying CSS selectors which are used on CSS style-sheet. You can select one or more elements with the given CSS selectors by using querySelectorAll method.

To select an element with id 'nav' you can use the following code.

var nav=document.querySelectorAll("#nav");

To select a paragraph written in english you can use the following code.

var eng=document.querySelectorAll("p[lang="en"]");

Here are other examples of CSS selectors to select elements from the document.

#log span     // selects any <span> descendant of the element with id="log"

#log>span     // Selects <span> child of the element with id="log"

*[name="x"]     // Selects any element with a name="x" attribute.

You can also use document.all[] method, which is a collection that represented all the elements in the document as the following although this method is replaced by standard methods like getElementById() and getElementsByTagName().

document.all[0]         // Selects the first element in the document
document.all["navbar"]         // Selects all elements with id or name="navbar"
document.all.tags("div")     // Selects all <div> elements in the document
document.all.tags("p")[0]     // The first <p> in the document