Yahoo! Developer Network Home - Help

YDN Site Search

# YUI Library Examples: Dom Collection: Using getElementsByClassName

# Dom Collection: Using getElementsByClassName

Clicking the document will use Dom's `getElementsByClassName` method to collect all of the elements with the class `bar` applied.

View example in new window.

div class="bar"
div class="bar-baz"
div class="bar "
div class=" bar "
div class=" bar baz"
div class=" bar2 baz"
div class="foo"
div class="foo" id="bar"
div class="foo bar baz"

p class="bar"

## 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:

<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script> <script type="text/javascript" src="../../build/dom/dom.js"></script>

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:

<div class="bar">div class="bar"</div> <div class="bar-baz">div class="bar-baz"</div> <div class="bar ">div class="bar "</div> <div class=" bar ">div class=" bar "</div> <div class="bar baz">div class=" bar baz"</div> <div class="bar2 baz">div class=" bar2 baz"</div> <div class="foo">div class="foo"</div> <div class="foo" id="bar">div class="foo" id="bar"</div> <div class="foo bar baz">div class="foo bar baz"</div> <p class="bar">p class="bar"</p> <button id="demo-run">run</button>

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.

<script type="text/javascript"> var getByClass = function() { alert('found: ' + YAHOO.util.Dom.getElementsByClassName('bar', 'div')).length + ' elements'; }; </script>

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

<script type="text/javascript"> YAHOO.util.Event.on('demo-run', 'click', getByClass); </script>

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:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

### Dom Collection Examples:

- Using setXY
- Using getXY
- Using setStyle
- Using getStyle
- Using hasClass
- Using addClass
- Using removeClass
- Using getElementsByClassName

### More Dom Collection Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2007 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings