digg

Facebook Connect Join Digg About

Attributes > Classes: Custom DOM Attributes for Fun and Profit

unspace.ca — XHTML gives us the ability to extend our markup with customized, semantically meaningful attributes. The battle between classes and attributes might be a holy war to some.. and unknown to most others. To clear things up, in this article I explain several examples and provide functions for working with your own custom attributes.

Who dugg this?

Add a friend

submitted by

leftist Jan 9, 2007

47 diggs
digg

15 Comments

pcx99, on 10/12/2007, -0/+2If I could give you more diggs, I would. REALLY sweet article.
ada80ro, on 10/12/2007, -0/+2Unfortunately, it doesn't validate this way.
To validate, you'll have to send your xhtml with a Content-type: application/xhtml+xml. IE doesn't understand that.

The only solution is to make your own DTD:
http://alistapart.com/articles/customdtd/
gettarat, on 11/25/2008, -0/+1Great article!
http://externalharddrivereviews.org/
Bramus, on 10/12/2007, -0/+1Same here opinion here.
Above that I was looking for this kind of behavior actually :)
Kudos to Pete!
heyjohngreen, on 10/12/2007, -0/+1Great article.
LordKrispy, on 10/12/2007, -0/+1Pete, you did good by the geek code. I have made it required reading at the office.
cdamon, on 10/12/2007, -0/+0It's surprising no one's done this already, as it seems obviously useful. I agree that attribute/value pairs are a much better place to tie in functionality than classes. Their use seems more appropriate in a lightweight Ajax app than a heavyweight one, where for performance reasons (especially IE6's inability to recognize circular JS/DOM references during GC) you may not want to dynamically add a lot of expando props.

Maybe getElementsByAttribute() should take a tag name as an optional arg, so that you reduce the chance of having to navigate the entire DOM. Seems like you'd almost always be populating the same kind of element with a special-purpose attribute.
sginde, on 10/12/2007, -0/+0I've been using custom attributes to provide extra information for my JS widgets, but I never thought of the next step of using the attributes to apply behavior to my HTML elements. Really good article and thanks for the 'document.getElementByAttribute' method.
yenta4shop, on 09/07/2008, -0/+0http://www.yenta4shop.co.uk/
http://astore.amazon.com/12.volt.battery.charger-2 ...
http://astore.amazon.com/5.gallon.water.bottle-20
http://astore.amazon.com/aerobed.raised-20
http://astore.amazon.com/bug.zapper-20
http://astore.amazon.com/flowtron.insect.killer-20
http://astore.amazon.com/furniture.chaise.lounge-2 ...
http://astore.amazon.com/inflatable.bed-20
http://astore.amazon.com/steam.cleaner.mop-20
leftist, on 10/12/2007, -0/+0Hey Conrad!

I might be misunderstanding you, but the document.getElementsByAttribute does in fact take a second parameter. It's not a tag nodeName but the id of a node in the tree from which to start the recursion.

I find I almost never start at BODY; generally it'll either be a SELECT or a TABLE/DIV/UL that has everything I'm looking for.
yogastore, on 06/27/2008, -0/+0http://astore.amazon.com/holmes.tower.fan-20
http://astore.amazon.com/honeywell.tower.fan-20
http://astore.amazon.com/10.cup.rice.cooker-20
http://astore.amazon.com/zojirushi.10.cup.rice.coo ...
http://astore.amazon.com/bug.zapper-20
http://astore.amazon.com/rat.zapper-20
http://astore.amazon.com/250gb.external.hard.drive ...
http://astore.amazon.com/500.gb.external.hard.driv ...
http://astore.amazon.com/surfboard.cable.modem-20
http://astore.amazon.com/wireless.cable.modem-20
jimmyether, on 10/12/2007, -1/+0Great article! Guess I better start playing with Prototype.
SeanLerner, on 10/12/2007, -2/+0I'm honoured to give you my first digg.
Add a Comment

Login or register to comment!
Or, sign-in super fast with your Facebook account ...

Site Links: Home; Take a Tour; Search Digg; Digg Mobile; RSS Feeds; Popular Archive

Help: Frequent Questions; How Digg Works; Report a Website Bug

All About Digg: About Us; Contact Us; Community Guidelines; The Digg Blog; Digg Townhalls & Meetups; Jobs at Digg; Advertise on Digg; Diggnation Podcast

Digg Store: Get hats, shirts, hoodies, stickers, and more at the Digg Store.

Digg Tools & API: All Digg Tools; DiggBar Tools; Firefox Toolbar; Twitter Feeds; Add Digg to Google; Netvibes Widget; Integrate Digg Buttons; Digg Badges; Make a Digg Widget; API for Developers

Digg Dialogg!: Digg Dialogg lets you choose the questions.

Digg Labs: Get a real-time view beneath the surface of Digg.; Digg Labs Home; Arc, Swarm, Stack, Bigspy, Pics

© Digg Inc. 2009 — Content created and posted by Digg users is dedicated to the public domain | Terms of Use Updated | Privacy Policy
DIGG, DIGG IT, DUGG, DIGG THIS, Digg graphics, logos, designs, page headers, button icons, scripts, and other service names are the trademarks of Digg Inc.