I have an webpage which shows a single item for sale with an add to basket button. The page makes use of alot of javascript to allow the user to customise the item.I now need to modify the page to show multiples of similar items on the same page, each additional item also customisable in the same way by the user. The javascript makes heavy use of id's in the markup to find elements and manipulate them to provide the client side item customisation.

My 1st thought is to allow the html markup to repeat for each item,also allowing the IDs to repeat themselves but add an additional div with a unique ID around each items markup to separate the scope of the repeated ID's , making the repeated ID's unique within the containing div. This should allow the javascript to stay relatively the same with the exception that any references to repeated ID's will need to be scoped for a particular DIV ID

Bearing in mind I want the outcome to be cross browser compatible , IE6 -IE9 , Firefox 3+ , Chrome, Safari, Opera, how sensible does this approach sound? Will some browsers disallow repeated IDs or behave badly with them? Any advice as to a better approach or things I should look out for would be very welcomed. Thanks

-----------------addendum----------------------------------------------------------------

It seems the overwhelming consensus is that it's a really really bad idea to repeat ID's mostly because the standards say id's should be unique and although some/most browsers support it now , there's no guarantee for the future. I agree with you all on this totally.

The class approach seemed to be the best route to take from the advice received but now it looks like older browsers won't support it, specifically IE6 and 7. Any advice on a way forwards from here?

-----------------addendum----------------------------------------------------------------

On balance getElementsByTagName seems to be the most compatible way forwards , covering a good spectrum of mobile browsers too.

Thanks for all your advice.

I have an webpage which shows a single item for sale with an add to basket button. The page makes use of alot of javascript to allow the user to customise the item.I now need to modify the page to show multiples of similar items on the same page, each additional item also customisable in the same way by the user. The javascript makes heavy use of id's in the markup to find elements and manipulate them to provide the client side item customisation.

My 1st thought is to allow the html markup to repeat for each item,also allowing the IDs to repeat themselves but add an additional div with a unique ID around each items markup to separate the scope of the repeated ID's , making the repeated ID's unique within the containing div. This should allow the javascript to stay relatively the same with the exception that any references to repeated ID's will need to be scoped for a particular DIV ID

Bearing in mind I want the outcome to be cross browser compatible , IE6 -IE9 , Firefox 3+ , Chrome, Safari, Opera, how sensible does this approach sound? Will some browsers disallow repeated IDs or behave badly with them? Any advice as to a better approach or things I should look out for would be very welcomed. Thanks

-----------------addendum----------------------------------------------------------------

It seems the overwhelming consensus is that it's a really really bad idea to repeat ID's mostly because the standards say id's should be unique and although some/most browsers support it now , there's no guarantee for the future. I agree with you all on this totally.

The class approach seemed to be the best route to take from the advice received but now it looks like older browsers won't support it, specifically IE6 and 7. Any advice on a way forwards from here?

-----------------addendum----------------------------------------------------------------

On balance getElementsByTagName seems to be the most compatible way forwards , covering a good spectrum of mobile browsers too.

Thanks for all your advice.

• javascript
• html
• cross-browser

• 1 It's not good practice. Why don't you just use classes? – Jason Commented Feb 10, 2012 at 18:57
• I've not used the approach of using classes before. Not totally sure how it would work but I'll look it up. Thanks for your suggestion. – Rich Commented Feb 10, 2012 at 19:04
• There's no "scoping" at all - the "id" value of an element is considered to be a global unique identifier. If it's not, then you can depend on various things getting weird. – Pointy Commented Feb 10, 2012 at 19:07
• I use the word scoping loosly. What I mean is you can get to a non uniquely ID'd dom element by finding it's unique container div element then looking through the children. – Rich Commented Feb 10, 2012 at 19:15
• @Pointy I accept your point about things getting weird though, seems although alot of browsers support non unique ids, some don't properly and would be a souce of infinite frustration trying to debug. – Rich Commented Feb 10, 2012 at 19:47

4 Answers 4

Don't reuse id's. Ever. It results in very unexpected behavior. If you need to reuse markers then make use of classes instead.

If you have the following syntax

<div id="container1"><span id="a"></span></div>
<div id="container2"><span id="a"></span></div>

What would you expect document.getElementById('a') to do?

Instead use:

<div id="container1"><span class="a"></span></div>
<div id="container2"><span class="a"></span></div>

Then you can access them via.

document.getElementsByClassName('a') 

Beginning with HTML 4.01 specification dated Dec 24, 1999 it is invalid if the id attribute has a duplicate value.

You shoud use class, both referenced here:

http://www.w3.org/TR/html401/struct/global.html#h-7.5.2

For this sort of thing, I usually iterate through the childNodes or use getElementsByTagName with the retrieved element.

<div id="div_with_id">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>


<script>

    var div = document.getElementById("div_with_id");
    var cNodes = div.getElementsByTagName("div");

    for(var i = 0, l = cNodes.length; i < l; i++) {
        console.log(cNodes[i].innerHTML);
    }

</script>

I use getElementById only when necessary, which it turns out, isn't all that often ;)

Remember: getElementsByTagName gets all elements of a type, including elements within elements. childNodes gets only the top level, but gets everything in the element, including text nodes.

The DOM is not the supplied text. The ID is supposed to be unique in the DOM. If a browser allows more than one node with the same ID, there's no guarantee that it will do so in the future. So even if it works, you shouldn't take advantage of that fact. Just do the right thing and either use a unique ID, or a class as appropriate.