问题
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.
回答1:
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.
回答2:
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')
回答3:
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
回答4:
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.
来源：https://stackoverflow.com/questions/9233191/repeated-ids-in-an-html-document-how-bad-an-idea-is-it-if-they-are-scoped-by