javascript get element by class

**GlassFish** · 06-03-2010

I am a student and working on a small web project which is designing with the help of HTML and java script.I have a question regrading this project and I hope,you all will help me to solve my query.My Question is that Is there a way to access an element by class instead of ID so you could assign an action to more than one element at once?

Please,It's all depends on your suggestion.

Thanks.

**Reegan** · 06-03-2010

Hi !

This is very nice question and I think it can be done through the class named getelementbyclass which can be suitable to access all the elements of your page.

As a student,I will suggest you to use some different thing which are new in and being used by most of the developers.You are also an student and can perform different experiments of using different things.

You can use Jquery for this which is newer and can help you a lot.

**opaper** · 06-03-2010

Before starting anything, just take a look on some important discussion.The modern browsers have already implemented the getElementsByClassName() method.

I am going to show you a code which will access the elements of page during loading of page .The getelementbyclass can be used in the program as follows-

Code:

onload=function(){
if (document.getElementsByClassName == undefined) {
	document.getElementsByClassName = function(className)
	{
		var hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)");
		var allElements = document.getElementsByTagName("*");
		var results = [];

		var element;
		for (var i = 0; (element = allElements[i]) != null; i++) {
			var elementClass = element.className;
			if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass))
				results.push(element);
		}

		return results;
	}
}
}

**MindSpace** · 06-03-2010

Changing image style

According to above discussion.it has been very clear that you can access the elements of the pages using this class.So I would tell you how a image can be accessed through this function and possibility to change the behavior of image using some special arguments.

The code to access the image from the page would be -

Code:

var img_array = document.getElementsByTagName("img");
for (lp_var = 0; lp_var < arr.length; lp_var++) 
 {
   arr[lp_var].style.width = arr[lp_var].style.width ? "" : "74%" ;
 }

The above written code will change the width of the image.

**Modifier** · 06-03-2010

The getelementbyclass is specified as the method in the web programming.We can attach it with different elements and also the event handler.

I think,you all would be aware of the event programming through the javascript which uses different events like-onmouseover,onmouseout,onclick,etc.

We can use this method with those events as a demonstration is given -

Code:

<a href=”…” onclick=”getElementByClass(‘whatever’);”><img src=”…”></a>

Just include the above code with appropriate information means other arguments in the tag and refresh the browser after saving the changes.

**Praetor** · 06-03-2010

This one is an independent example of Get Elements By Class which is able to access the whole elements of the HTML document.

You need to just specify the name of function and pass the BODY argument in the parenthesis of the function,The definition can take this form -

f

Code:

unction getElementsByClassName(classname, node) {
   
      if(!node) node = document.getElementsByTagName("body")[0];
   
      var arr = [];
   
      var reg = new RegExp('\\b' + classname + '\\b');
   
      var Elt = node.getElementsByTagName("*");
   
      for(var lp1=0,j=elt.length; lp1<lp2;lp1++)
   
      if(reg.test(els[lp1].className))a.push(els[lp1]);
   
      return arr;
   
      }