Repeated identifiers in an html document. How bad is the idea if they are bounded by a div with a unique identifier?

Question

I have a webpage that shows one item for sale with a add to cart button. The page uses a lot of javascript so the user can customize the element. I now need to change the page to show multiple similar elements on one page, each additional element is also configured by the user in the same way. Javascript heavily uses an identifier in the markup to find and manipulate elements to provide custom element customization.

My first thought is to allow html markup to be repeated for each element, while also allowing identifiers to repeat, but adding an extra div with a unique identifier around each element markup, to separate the area of ​​the repeated identifier, making the repeat Identifier unique inside the containing div. This should allow javascript to remain relatively the same, with the exception that any references to the re-identifier should be covered by a specific DIV identifier

Taking into account that I want the result to be compatible with the browser, IE6 -IE9, Firefox 3+, Chrome, Safari, Opera, how reasonable does this approach sound? Will some browsers refuse repeated identifiers or behave badly with them? Any advice on a better approach or what I should pay attention to would be greatly appreciated. Thanks

----------------- adding ----------------------------- --- --------------------------------

It seems that the overwhelming consensus is that it is really a very bad idea to re-identify, mainly because the standards say that the identifier should be unique, and although some / most browsers support it now, there is no guarantee for the future. I completely agree with you on this.

The cool approach was apparently the best way to get the advice you got, but now it looks like older browsers don't support it, especially IE6 and 7. Any tips along the way from here?

----------------- adding ----------------------------- --- --------------------------------

In balance, getElementsByTagName seems to be the most compatible redirection method, also covering a wide range of mobile browsers.

Thanks for all your advice.

Answer 1

For this kind of thing, I usually repeat through childNodes or use getElementsByTagName with the extracted 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 if necessary, which, it turns out, is not so often;)

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

Answer 2

Do not reuse id. Ever. This leads to very unexpected behavior. If you need to reuse markers, then use classes.

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') ?

Use instead:

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

Then you can access them through.

 document.getElementsByClassName('a') 

Answer 3

Starting with the HTML 4.01 specification, dated December 24, 1999, it is not valid if the id attribute has a duplicate value.

You use the class as indicated here:

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

Answer 4

DOM is not provided text. The identifier must be unique in the DOM. If the browser allows more than one node with the same identifier, there is no guarantee that it will do so in the future. Therefore, even if it works, you should not take advantage of this fact. Just do the right thing and either use a unique identifier or an appropriate class.