Methods
1. document.getElementById()
Returns a reference to the element by its ID.
Syntax :
element = document.getElementById(id);
Parameters :
element is a reference to an Element object, or null if an element with the specified ID is not in the document.
id is a case-sensitive string representing the unique ID of the element being sought.
Example :
<!DOCTYPE html>
<html>
<head>
<script>
function changeColor(newColor) {
var elem = document.getElementById("para1");
elem.style.color = newColor; }
</script>
</head>
<body>
<p id="para1">Some text here</p>
<button onclick="changeColor('blue');">blue</button>
<button onclick="changeColor('red');">red</button>
</body>
</html>
2. document.getElementsByTagName()
Returns an HTMLCollection of elements with the given tag name. The complete document is searched, including the root node. The returned HTMLCollection is live, meaning that it updates itself automatically to stay in sync with the DOM tree without having to call document.getElementsByTagName() again.
Syntax :
var elements = document.getElementsByTagName(name);
Parameters :
elements is a live HTMLCollection (but see the note below) of found elements in the order they appear in the tree.
name is a string representing the name of the elements. The special string "*" represents all elements.
Example :
<!DOCTYPE html>
<html>
<head>
<script>
function getAllParaElems() {
var allParas = document.getElementsByTagName("p");
var num = allParas.length;
alert("There are " + num + " paragraph in this document");
}
</script>
</head>
<body>
<p>Some outer text</p>
<p>Some outer text</p>
<button onclick="getAllParaElems();">
</body>
</html>
3. document.getElementsByClassName()
Returns an array-like object of all child elements which have all of the given class names. When called on the document object, the complete document is searched, including the root node. You may also call getElementsByClassName() on any element; it will return only elements which are descendants of the specified root element with the given class names.
Syntax :
var elements = document.getElementsByClassName(names); // or
var elements = rootElement.getElementsByClassName(names);
Parameters :
elements is a live HTMLCollection of found elements.
names is a string representing the list of class names to match; class names are separated by whitespace
getElementsByClassName can be called on any element, not only on the document. The element on which it is called will be used as the root of the search.
Example :
Get all elements that have a class of 'test'
document.getElementsByClassName('test');
Get all elements that have both the 'red' and 'test' classes
document.getElementsByClassName('red test');
Get all elements that have a class of 'test', inside of an element that has the ID of 'main'
document.getElementById('main').getElementsByClassName('test');
We can also use methods of Array.prototype on any HTMLCollection by passing the HTMLCollection as the method's this value. Here we'll find all div elements that have a class of 'test':
var testElements = document.getElementsByClassName('test');
var testDivs = Array.prototype.filter.call(testElements, function(testElement){
return testElement.nodeName === 'DIV';
});