Question

I know almost any item in the DOM can have an “id” attribute, and I’ve been using it to keep track of each client in a table of clients. I also am aware, that you are not supposed to have any id be repeated. In my code, the id of the row is set to each person’s “clientId”, which comes from a unique key in a database, so there will be no repeats… but elsewhere on the page is an “issues” table, where i have been setting the id of each row to the “issueId” (again a unique key), but I realized that a clientId, could potentially match an issueId, and I don’t know the consequence.

I’m looking for a way to identify the each row so I can call them up later. Is there another attribute I can use that would be preferred for this? should I just add the word “client” in front of the number when assigning the id’s? I want to use standard practices and have a fast web app here.

It’s ok if a client and a issue number match because I will always know which one I’m looking for and I can drill down to the table first when looking for it. I just don’t want to use “id” because its illegal to have id’s repeat. For example if I’m looking for an issue I can use something like. document.getElementById("issueTable").getElementBySOMETHING(issueId) instead of just document.getElementBySOMETHING(issueId)

Answer 1

To make sure that there are no conflicts, you could add a unique prefix to your id values, for example, client-X or issue-X.
Now, even if they share the same key, the id attribute is different for each due to this prefix. You could then modify your lookup code as follows

document.getElementById('issue-'+key); // get by issue
document.getElementById('client-'+key); // get by client

This means you can get your element in one lookup and using getElementById which is one of the fastest methods. Furthermore, this method means you won’t have previous generation browsers have trouble with a key beginning with a number should you want to use a CSS rule to style the element differently.