Finding Element By Property/Attribute

Question

Given the following

  ...
     <tr xyz="Alpha"> ... </tr>
     <tr xyz="Bravo"> ... </tr>
     <tr xyz="Delta"> ... </tr>
  ...

how can I get the row having xyz = "Bravo" in JScript, aside from just creating a getElementsByTagName() loop, and testing each returned element for it?

Is xyz an attribute, or a property?

Answer 1

No xyz isn't a valid attribute or property, but data attributes introduced in HTML5 are valid .

You can use them like this:

     <tr data-xyz="Alpha"> ... </tr>
     <tr data-xyz="Bravo"> ... </tr>
     <tr data-xyz="Delta"> ... </tr>

Then you can use .querySelector() to find a particular element.

document.querySelector('[data-xyz="Bravo"]');

If you want to limit searching to tr alone, then do this:

document.querySelector('tr[data-xyz="Bravo"]');