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.
Using getElementsByClassName
getElementsByClassName, part of the YUI Dom Collection, makes it easy to collect elements that have a given className applied.
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.
Configuration for This Example
You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.
YUI Logger Output:
Logger Console
INFO 74ms (+0) 10:32:02 AM:
Dom
generateId generating yui-log-filter-Dom010
WARN 74ms (+0) 10:32:02 AM:
Dom
batch called with invalid arguments
INFO 74ms (+0) 10:32:02 AM:
Dom
generateId generating yui-log-filter-LogReader09
WARN 74ms (+0) 10:32:02 AM:
Dom
batch called with invalid arguments
INFO 74ms (+0) 10:32:02 AM:
Dom
generateId generating yui-log-filter-Get08
WARN 74ms (+0) 10:32:02 AM:
Dom
batch called with invalid arguments
INFO 74ms (+0) 10:32:02 AM:
Dom
generateId generating yui-log-filter-example07
WARN 74ms (+0) 10:32:02 AM:
Dom
batch called with invalid arguments
INFO 74ms (+0) 10:32:02 AM:
Dom
generateId generating yui-log-filter-global06
WARN 74ms (+0) 10:32:02 AM:
Dom
batch called with invalid arguments
INFO 74ms (+0) 10:32:02 AM:
Dom
generateId generating yui-log-filter-window05
WARN 74ms (+1) 10:32:02 AM:
Dom
batch called with invalid arguments
INFO 73ms (+0) 10:32:02 AM:
Dom
generateId generating yui-log-filter-time04
WARN 73ms (+0) 10:32:02 AM:
Dom
batch called with invalid arguments
INFO 73ms (+0) 10:32:02 AM:
Dom
generateId generating yui-log-filter-error03
WARN 73ms (+0) 10:32:02 AM:
Dom
batch called with invalid arguments
INFO 73ms (+0) 10:32:02 AM:
Dom
generateId generating yui-log-filter-warn02
WARN 73ms (+0) 10:32:02 AM:
Dom
batch called with invalid arguments
INFO 73ms (+0) 10:32:02 AM:
Dom
generateId generating yui-log-filter-info01
WARN 73ms (+0) 10:32:02 AM:
Dom
batch called with invalid arguments
INFO 73ms (+1) 10:32:02 AM:
Dom
generateId generating yui-log-hd00
INFO 72ms (+1) 10:32:02 AM:
LogReader instance0
LogReader initialized
INFO 71ms (+1) 10:32:02 AM:
Get
Appending node: ../../../2.x/build/event-mouseenter/event-mouseenter-min.js
INFO 70ms (+0) 10:32:02 AM:
Get
attempting to load ../../../2.x/build/event-mouseenter/event-mouseenter-min.js
INFO 70ms (+32) 10:32:02 AM:
Get
_next: q0, loaded: undefined
INFO 38ms (+38) 10:32:02 AM:
example
The example has finished loading; as you interact with it, you'll see log messages appearing here.
INFO 0ms (+0) 10:32:02 AM:
global
Logger initialized
Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.
Dom Collection Examples:
More Dom Collection Resources:
- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)
- Yahoo! UI Library
- Home (external)
- YUIBlog (external)
- YUI Discussion Forum (external)
- YUI on GitHub
- API Documentation
- Functional Examples
- YUI Theater (external)
- YUI License (external)
- YUI Functional Examples
- Animation
- AutoComplete
- Browser History Manager
- Button
- Calendar
- Carousel
- Charts
- Color Picker
- Cookie
- Connection Manager
- Container
- DataTable
- Dom
- Drag & Drop
- Event
- Get
- ImageCropper
- ImageLoader
- JSON
- Layout Manager
- Logger
- Menu
- Paginator
- Profiler
- ProfilerViewer
- ProgressBar
- Resize
- Rich Text Editor
- Selector
- Slider
- Storage
- SWF
- SWFStore
- Stylesheet
- TabView
- TreeView
- Uploader (experimental)
- YAHOO Global Object
- YUI Loader
- YUI Test
- Reset CSS
- Base CSS
- Fonts CSS
- Grids CSS
- YUI Articles on the YUI Website
- YUI FAQ (external)
- Graded Browser Support (external)
- Bug Reports/Feature Requests (external)
- Serving YUI Files from Yahoo! (external)
- Security Best Practices (external)
Copyright © 2011 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings