0

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).

  • Are you using jQuery? That makes it much easier to reference elements in a variety of ways. Also, if you are reusing bits of HTML like that, consider using client side templates. – GrandmasterB Aug 5 '14 at 18:03
  • @GrandmasterB yes i'm using jQuery, ... – Rafael Aug 5 '14 at 18:06
  • 1
    In jQuery, you can use parent & child selectors. So you can extract the specific elementA under sGroupName2. – GrandmasterB Aug 5 '14 at 18:48
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.

1

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.

  • This question was very difficult to accept, both answers are correct. I accepted the other one because the note at the end saying that the search for class it s "fast". :( – Rafael Aug 6 '14 at 16:51
  • 1
    No problem man, I'm not here to scavenge reputation points. I'm here to learn and share what I learnt, and both answers show two sides of a larger body of possibilities. ;) Note however that you don't always need blazing speed when you'll do a dozen of accesses across a moderately sized DOM. You need that speed in inner loops or, even much more so when talking about webapps, you need to pamper user experience by carefully planning ajax calls in volume and timing. Take care. :) – Mathias Dolidon Aug 6 '14 at 22:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.