Alternatives to the use of the Id/Name properties with non-inputs elements in HTML

Question

I'm migrating a website that use Javacsript/HTML/PHP using reusable javascript code, in certain moment I saw the opportunity to simplify code in functions that use almost the same code.

Let's say: I want to display values from the database into various <span> or <div> elements using AJAX. all the referred elements use the same layout to display the data, the difference only resides in the element id or a minimal procedure to validate data. That's all.

However, I quickly came to the conclusion that I don't have a way to refer a specific element in HTML without use the id property, and the only alternative that I think was the use of name property. I know that this property it's only for <input> in a <form>,and because this elements are not <input> this rule doesn't apply (I know that in HTML the rules are not enforced).

The basic idea is to stop using ids to make my code more reusable.

To pass from this:

<div id='sGroupName1'>
  +---<div id='elementA1'>
  |     +---<span id='txtA1'>
  +---<div id='elementB1'>
        +---<span id='txtB1'>

<div id='sGroupName2'>
  +---<div id='elementA2'>
  |     +---<span id='txtA2'>
  +---<div id='elementB2'>
        +---<span id='txtB2'>

to this:

<div id='sGroupName1'>
  +---<div name='elementA'>
  |     +---<span name='txtA'>
  +---<div name='elementB'>
        +---<span name='txtB'>

<div id='sGroupName2'>
  +---<div name='elementA'>
  |     +---<span name='txtA'>
  +---<div name='elementB'>
        +---<span name='txtB'>

Doing my code in this way, i think will break the HTML5 conformity rules. I know this isn't a problem per se, because I have solved in not orthodox way, but I want to hear what is the best way to deal with this situations.

I know that exist a question related HTML - Alternative for ID when ID is only unique within a certain scope? but in this case I don't want to deal with classes and CSS rules because the current page is using a lot of CSS and there are a lot Javascript function in the page that manipulates the CSS class, using Class as kind of identifier, I think would lead to some bugs (but not so sure).

Answer 1

If for some reason parent / child selectors won't work as GrandmasterB suggests another idea that doesn't violate HTML standards is to use CSS classes to mark your elements.

<div id='sGroupName1'>
  +---<div class='boxy elementA'>
  |     +---<span class='txtA'>
  +---<div class='boxy elementB'>
        +---<span class='txtB'>

<div id='sGroupName2'>
  +---<div class='boxy elementA'>
  |     +---<span class='txtA'>
  +---<div class='boxy elementB'>
        +---<span class='txtB'>

Since you can stack classes you can do this without interfering with the visual layout. In fact, this was a time honored tradition amongst ASP.NET developers back in the days of web forms when you had no control of element IDs.

I also suspect that lookups by class name are about the 3rd fastest DOM lookups after ID and tag name as you really need to optimize for CSS and jQuery performance these days.

Answer 2

Beyond the class attributes that have already been suggested, you may be interested in data-* attributes. Those are whatever you want them to be. Not many rules to abide by. Check this out for details : MDN documentation

<div id='sGroupName1'>
  <div data-my-own-whatever='elementA'>
       <span data-my-own-whatever='txtA'>
  <div data-my-own-whatever='elementB'>
        <span data-my-own-whatever='txtB'>

<div id='sGroupName2'>
  <div data-my-own-whatever='elementA'>
       <span data-my-own-whatever='txtA'>
  <div data-my-own-whatever='elementB'>
        <span data-my-own-whatever='txtB'>

Most frameworks will let you get down to your dom node with a CSS-like selector, such as : #sGroupName2 [data-my-own-whatever="txtB"].

Hope this helps.