Programming Help

Web Development



What's Here?

  • Members: 109,525
  • Replies: 414,389
  • Topics: 63,016
  • Snippets: 2,288
  • Tutorials: 611
  • Total Online: 1,208
  • Members: 50
  • Guests: 1,158

Who's Online?

Welcome to Dream.In.Code
Getting Help is Easy!

Join 109,525 Programmers for FREE! Ask your question and get quick answers from experts. There are 1,208 online right now! We've got more than 500 tutorials and 2,000 snippets. Join and find out why Dream.In.Code is the #1 programming help community on the internet! Registration is fast and FREE... Join Now!



Getting an Element by Class

 
 Reply to this topicStart new topic

Getting an Element by Class
atdrago
post 13 Jun, 2008 - 09:22 AM
Post #1


New D.I.C Head

*
Joined: 8 Jun, 2008
Posts: 27



Thanked 2 times
My Contributions
Hello, all.

Is there any way to get an element by class, instead of id?

I'd like to select every paragraph element of a certain class in my HTML, and do some stuff to that paragraph. There will be several paragraphs of this class (hence using class) so adding the id attribute isn't really an option (I think).

Any suggestions?

Thanks!
User is offlineProfile CardPM

Go to the top of the page


level1
post 13 Jun, 2008 - 09:43 AM
Post #2


New D.I.C Head

*
Joined: 12 Jun, 2008
Posts: 34



Thanked 5 times
My Contributions
There sure is a way. All the prebuilt libraries like jquery, prototype have it. My suggestion is google prototype - or better for you prototype.lite.js download it, link to it then you can use the command

document.getElementsByClassName('className')

I'd like to point out that this script can be slow especially for large documents. I modifed the prototype function and add a container to it for personal use, so that it only looks within my container and not the entire document. For me it knocked off like 3s script time. So, beware of overusing it, but for basic page it kicks ass!!!
User is offlineProfile CardPM

Go to the top of the page

quim
post 13 Jun, 2008 - 11:23 AM
Post #3


D.I.C Head

Group Icon
Joined: 11 Dec, 2005
Posts: 141



Thanked 2 times

Dream Kudos: 350
My Contributions
This function does it for you, if you don't want to use any library:
CODE
function getElementsByClassNameEx( htmlObj, theClassName )
{
        var theObj = document.getElementsByTagName( htmlObj );
        
        for( var i = 0; i < theObj.length; i++ )
        {
                if( theObj[ i ].className == theClassName )
                {
                        /* manipulate the objects
                        with the chosen class name */                
                }
        }
}

I just didn't name the function to getElementsByClassName to avoid any confusion with the DOM implementation comming up in HTML 5, as seen in link below.
http://www.w3.org/TR/2008/WD-html5-2008012...entsbyclassname
User is offlineProfile CardPM

Go to the top of the page

atdrago
post 13 Jun, 2008 - 11:43 AM
Post #4


New D.I.C Head

*
Joined: 8 Jun, 2008
Posts: 27



Thanked 2 times
My Contributions
Thanks, quim! Who knew there was a className method.

Thanks also level1, but I try to stay away from big libraries like jquery and such primarily because I like to write the code myself, and like you said, they're huge.

Thanks again guys.
User is offlineProfile CardPM

Go to the top of the page

Fast ReplyReply to this topicStart new topic
Time is now: 9/7/08 08:18PM
Invision Power Board v2.1.7 © 2008  IPS, Inc.
Licensed to: MediaGroup1

Live Help!

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

Bye Bye Ads

Free DIC T-Shirt

T-Shirt Example

Related Sites

Monthly Drawing

Thumb Drive

Partners

Top Contributors

Top 10 Kudos This Month