YUI Library Examples: Dom Collection: Using getElementsByClassName

Using getElementsByClassName

getElementsByClassName, part of the YUI Dom Collection, makes it easy to collect elements that have a given className applied.

The first thing we need to do is load the Dom source file and dependencies:


1	<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
2	<script type="text/javascript" src="../../build/dom/dom.js"></script>
	view plain \| print \| ?

To illustrate the use of getElementsByClassName, we'll create a number of <div>s with various combinations of classNames applied. When the document is clicked, we will collect all of the elements that have the className bar.

Add with some markup for the demo elements, including a button to trigger the demo:


1	<div class="bar">div class="bar"</div>
2	<div class="bar-baz">div class="bar-baz"</div>
3	<div class="bar ">div class="bar "</div>
4	<div class=" bar ">div class=" bar "</div>
5	<div class="bar baz">div class=" bar baz"</div>
6	<div class="bar2 baz">div class=" bar2 baz"</div>
7	<div class="foo">div class="foo"</div>
8	<div class="foo" id="bar">div class="foo" id="bar"</div>
9	<div class="foo bar baz">div class="foo bar baz"</div>
10	<p class="bar">p class="bar"</p>
11	<button id="demo-run">run</button>
	view plain \| print \| ?

Now we will define the function that collects the elements with the className of bar present. The first argument of the getElementsByClassName method is the className we are searching for. The second argument is an optional tagName, which will make the search much quicker. The third argument is an optional ID of an HTMLElement, or an actual HTMLElement object to use as the root node to start from.


1	<script type="text/javascript">
2	var getByClass = function() {
3	alert('found: ' + YAHOO.util.Dom.getElementsByClassName('bar', 'div')).length + ' elements';
4	};
5	</script>
	view plain \| print \| ?

To trigger the demo, we will use the YUI Event Utility's on method to listen for clicks on the button.


1	<script type="text/javascript">
2	YAHOO.util.Event.on('demo-run', 'click', getByClass);
3	</script>
	view plain \| print \| ?

This is a simple example of how to use the YAHOO.util.Dom.getElementsByClassName method. Keep in mind that the optional arguments should be used whenever possible to maximize the performance of the search.

YUI Logger Output:

Logger Console

INFO 62ms (+0) 11:50:57 AM: 
Dom: 
addClass adding yui-log

INFO 62ms (+59) 11:50:57 AM: 
Dom: 
hasClass returning false

INFO 3ms (+3) 11:50:57 AM:

example:

The example has finished loading; as you interact with it, you'll see log messages appearing here.

INFO 0ms (+0) 11:50:57 AM: 
global: 
Logger initialized

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

YUI Library Examples: Dom Collection: Using getElementsByClassName

Using getElementsByClassName

YUI Logger Output:

Logger Console

Dom Collection Examples:

More Dom Collection Resources: