3 replies to this topic

[Csabi]

I will show you two ways to get an element by class: using getElementsByTagName or creating a getElementByClass function:

1. Using getElementsByTagName
This code loops through each element of the page and check`s it`s class name:

for(var i=0;i<document.getElementsByTagName('*').length;i++){

   if(document.getElementsByTagName('*')[i].className == 'YOUR-CLASS'){

      document.getElementsByTagName('*')[i].style.backgroundColor = 'black';

   }

}

2. Creating a getElementsByClass function
This code creates the getElementsByClass function what returns an array of elements with the selected class name:

document.getElementsByClass = function(class){

   var itemsfound = new Array;

   var elements = document.getElementsByTagName('*');

   for(var i=0;i<elements.length;i++){

      if(elements[i].className == class){

         itemsfound.push(elements[i]);

      }

   }

   return itemsfound;

}

Use it in the following way to select only the element with the specified index:

document.getElementsByClass('YOUR-CLASS')[0].style.backgroundColor = 'black';

Or use this if you want to select each element:

for(var i=0;i<=document.getElementsByClass.length;i++){

   document.getElementsByClass('YOUR-CLASS')[i].style.backgroundColor = 'black';

}

Note: Javascript is case sensitive
If you like it don`t forget the +rep :)

[gokuajmes]

Aah wonderful , but sure what is the profile time to get a element using class name ?

[wim DC]

Why would you write your own getElementByClass if there is a getElementByClassName( ) allready?
document.getElementsByClassName('name');

[Csabi]

Hm..... you are right :)
I`m using adobe dreamweaver and when I`m typing a function it shows a list of valid DOM functions and there was no ClassName, but now I`we searched and you are right, it exists :)