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

Related Search Terms

• Selecting HTML Elements Using JavaScript

• Querying Elements Using JavaScript

   

Related Posts:

• How to Show Pop Up Window Using JavaScript

• How to go Back Browsing History Using JavaScript

• How to Click Button Using JavaScript?

• How to Write JavaScript Function as URL in Hyperlink?

• How to use Round, Random, Min and Max in JavaScript

• How to Concatenate, Join and Sort Array in JavaScript?

• How to Loop Through JavaScript Array?

• How to Loop using JavaScript?

• How to Show Pop Up Boxes Using JavaScript?

• How to Write Conditional Statements in JavaScript?

• How to Write JavaScript With HTML?

• How to create Changeable Date and Time Using JavaScript?

• How to Validate a HTML Form Using JavaScript?

• How to create a simple form using HTML?

• How to Create JavaScript Image Sideshow with Links

• How to Display Date Format in JavaScript?

• How to Validate a HTML Form Using JavaScript?

• What are the Different Ways to Redirect Page in JavaScript?

• How to create Timer Using JavaScript?

• How to make rounded corners border using CSS

• How to Create Custom CSS Template for Printing

• How to create a simple form using HTML?