How to access html elements in javascript?

The previous lesson of javascript lessons series was about Javascript Popup Windows and in this lesson we will learn to access html elements in javascript.

Why do we need to access html elements in javascript?

We need to access an html element in javascript whenever we want to change the default attributes or properties of that element on a javascript event like changing the color of the element on click event or dynamically appending an element to the already existing html element on javascript event.

document.getElementById();

document.getElementById() is a javascript method to access an html element with the id passed in it. Usually the id of each html element is unique, that is why it is the easiest method to access an html element in javascript. The basic structure of document.getElementById is given below:

var element = document.getElementById('id');

Consider the html div element given below:

<div id="red" style="width:400px;height:200px;border:1px solid #000;
background:red;">
</div>

To access the above div element in javascript all we need to do is, pass it's id i.e red in document.getElementById() like this:

<script type="text/javascript">
var element = document.getElementById('red');
</script type="text/javascript">

The above code enables us to access an html element with id="red" through a javascript variable (i.e element). We can get the style of the above div and alert it in javascript like this:

<script type="text/javascript">
var element = document.getElementById('red');
alert(element.style.background);
</script type="text/javascript">

The above code will alert the background color (red) of the div element.

document.getElementsByClassName();

document.getElementsByClassName() is another method to access an html element in javascript. As the class name of an html element is not unique and is used multiple times in an html document by different elements, that is why the output of document.getElementsByClassName() is not a single element by an array of element using the specific class name. The basic structure of document.getElementsByClassName() is given below:

var element = document.getElementsByClassName('class');

Consider the html div elements given below:

<div id="red" class="color" style="width:400px;height:200px;
border:1px solid #000;background:red;">
</div>
<div id="black" class="color" style="width:400px;height:200px;
border:1px solid #000;background:black;">
</div>

Now let us use document.getElementsByClassName() method to access the above div elements:

<script type="text/javascript">
var element = document.getElementsByClassName('color');
</script type="text/javascript">

The above code will get all the html elements with class (color) and save them in the javascript variable (element). Now if we want to alert the id of first div, we can do something like this:

<script type="text/javascript">
var element = document.getElementsByClassName('color');
alert(element[0].id);
</script type="text/javascript"> 

Similary, for second div we need to change the index of array (element) to 1 i.e element[1].

document.getElementsByTagName();

As the name suggests document.getElementsByTagName() works on html tag names. Just like document.getElementsByClassName(), the output of document.getElementsByTagName() is an array of elements having a specific tag. The basic structure of document.getElementsByTagName() is given below:

var element = document.getElementsByTagName('tagname');

Consider the same div elements we used above for document.getElementsByClassName() method. Now let us access the divs using document.getElementsByTagName() method:

var element = document.getElementsByTagName('div');
alert(element[0].id);

The above code will alert the id of first div element i.e red.

For more lessons on Javascript subscribe on InformationBitz.com