Multiple elements on a page with the same ID

[iamvela]

Hi, I have a widget that users can put on their own web-page. If the widget gets included multiple times, by a user, on his/her page then we will end up with a scenario with multiple widget-elements on the same page with the same id.

We have to be able to do some things with each of these widgets. Is there away that we can do a document.getElementbyId() and get an array of all matching elements?

For what we are doing we are running into a problem with Firefox.

Any pointers would be much appreciated. Thanks.

[g1smd]

An ID *must* be unique per page. That's in the HTML specs.

[Gibble]

An ID *must* be unique per page. That's in the HTML specs.

Most browsers don't break if it isn't though, but I agree, it definitely should be.

You could use class names instead to give items names. Personally, I would use jQuery so you can use CSS selectors to find elements.

[Fotiman]

Most browsers don't break if it isn't though, but I agree, it definitely should be.

Well, I guess that depends on your definition of "breaks". If you want to access one of those items via it's ID using document.getElementById, you won't be able to.
As Gibble wrote, you should use class names instead of IDs. I think all of the JavaScript libraries have methods to get elements by class name.

The jQuery way:

// Get all elements with class 'myclass'
var nodes = $('.myclass');

The YUI 2.7.0 Selector way:

// Get all elements with class 'myclass'
var nodes = YAHOO.util.Selector.query('.myclass'); 

The YUI 2.7.0 getElementsByClass way:

// Get all elements with class 'myclass'
var nodes = YAHOO.util.Dom.getElementsByClassName('myclass');

Just a few examples.

[iamvela]

Thanks for the suggestions to use jQuery but because the footprint needs to be reaaaly tiny we cannot use jQuery.

So lets say I want to make each widget "hidden" Is there a way I can do that? BTW this works in IE, but FF just hides the first one.

[Fotiman]

You could write your own "getElementsByClass" function. Or use the Yahoo minified files (yahoo-min.js and dom-min.js are only about 3k and 6k respectively).

[Gibble]

jQuery actually has a really small footprint, and is very fast.

The minified file is only 19k.

And it's selectors run fast as well. Or you can use this tool to compare the speeds in your browser of different libs (search google for slickspeed).