The different ways to select elements to query a document are explained below.
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.
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.
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.
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.
Also to find all <span> elements inside the first <p> element of document, you can write.
var firstpara=document.getElementsByTagName("p"); 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.
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.
To select a paragraph written in English you can use the following code.
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 // 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") // The first <p> in the document