How To Select Document Elements Using JavaScript?

You have to select the document elements for manipulation of elements of a document to complete any task for the document design or action of the document using JavaScript codes. There is a 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.

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

Table of Contents

Selecting Elements By ID Attribute

Any of the HTML elements can have the unique id attribute within the document. You can select an element based on this unique id with the getElementById() method of the document object. To select any element with id ‘elt’ you can use the following code.

Selecting Elements By Name Attribute

The 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 the name ‘address’ you can use the following code.

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

If there is only one element with a given name, you can also 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 Document 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");

Since you can select any element with given tagName with specifying the position number according to the order of the document. You can select the 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 Document Elements By CSS Class

It is 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 the 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[] the 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

Please follow and like us: