YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: Dom Collection: Exploring the Dom Collection's API

This example was contributed by Christian Heilmann and members of his Juku training class at Yahoo.

# Dom Collection: Exploring the Dom Collection's API

In this example, the use of several key Dom Collection methods is explored. Given the markup in the source section, you can invoke any of the methods by clicking on them; the Source is updated, as is its in-browser appearance (Render). In the Outupt section, you can review the elements that are selected or affected (or, in a few cases, the JavaScript `return` value) of the function you invoked.

View example in new window.

### Source

### Functions

- get('demo')
- get(['demo', 'demoList'])
- getAncestorByTagName('div', 'one')
- getAncestorByClassName('listItem')
- getChildren('demoList')
- getElementsBy(getElementsByClassName('specialItems'), 'li', 'demo')
- getFirstChild('demoList')
- getLastChild('demoList')
- getNextSibling('one')
- getPreviousSibling('two')
- isAncestor('demo', 'one')
- insertBefore(li, 'one')
- insertAfter(li, 'one')

### Render

### Output

### 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
- Exploring the Dom Collection's API

### More Dom Collection Resources:

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

Copyright © 2008 Yahoo! Inc. All rights reserved.

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