How to query elements by attribute value instead of attribute name

Question

So this is an interesting one and may very well be impossible to do efficiently. But I'm interested in finding an efficient way to query all html elements in the document that have a particular value set for any attribute. So, for example, instead of this:

document.querySelectorAll('[attrName]');

I'm looking for the equivalent of the following pseudo-code:

document.querySelectorAll('[*=specificValue]');

So essentially the result would be all elements that have any attribute whose value matches "specificValue". I know there are gross ways to do this such as:

var all = document.querySelectorAll('*');
var matches = [];
var attrs;
for (var i = 0; i < all.length; i += 1) {
  attrs = Array.prototype.slice.call(all[i].attributes);
  for (var j = 0; j < attrs.length; j += 1) {
    if (attrs[j].value === 'specificValue') {
      matches.push(all[i]);
      break;
    }
  }
}

However, I would really love to avoid analyzing every single html element like this. Any ideas?

Edit:

Thanks for all the help so far. Before too many people give alternate suggestions I should explain what this is for. Basically, it's an experiment. The idea was that I might be able to create live object-to-dom databindings like what you get in Ember.js but instead of having to compile templates, you could just use regular html attributes and have a syntax marker in the value itself that a binding should be created. For example: <a href="{{linkLocation}}"></a>. I figured this might be fun if there was an efficient way to select relevant elements on the fly. Clearly I know a loop has to happen somewhere. However, if the browser is running a native iteration, I'd prefer that over my own JavaScript loop. I just wasn't sure if there was some "secret" selector syntax I wasn't aware of or if anyone could think of any other cool tricks.

If you avoid iterating through all the elements, how do you expect to find the elements with the value desired? — Subliminal Hash
– Subliminal Hash, Commented Dec 24, 2013 at 6:07
There's nothing built-in that does this. It's a pretty unusual thing to need to do, so if you really need to do it you'll have to write your own loop. What is the use case? Why would you need to search for a value and not know whether it's an href, id, or class, for instance? — Barmar
– Barmar, Commented Dec 24, 2013 at 6:11
In which scenario would one look for a value, but not be interested to know which attribute it applies to??? — Christophe
– Christophe, Commented Dec 24, 2013 at 6:43
@Christophe, Good question. In a theoretical, experimental one where it's easier to present the problem in direct and simple terms than it is to spell out the whole project on Stack Overflow ;) — rescuecreative
– rescuecreative, Commented Dec 24, 2013 at 6:45

Jason · Accepted Answer · 2013-12-24 06:35:34Z

1

I wouldn't worry too much about performance at this point, but focus on code efficiency. If you don't want to incooporate any jQuery, and just use vanilla JS, then I would just store your attributes values in a class name. For example, if you have a following HTML element:

<div class="something" yo="1"></div>

I'd put entire attributes and values in a class name like

<div class="something yo1"></div>

Then you can simply use already built-in method to select every elements with the class name specified above.

var elems = document.getElementsByClassName("yo1");  //make sure to cache these selected elems in a variable. 

console.log(elems);

If you want to use jQuery, things get easier, because you can simply select element by attribute selector and it works across all browsers.

http://api.jquery.com/attribute-equals-selector/

answered Dec 24, 2013 at 6:35

Jason

1,3091 gold badge16 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jason Over a year ago

Just put that "value" in a class name and make things easier

Subliminal Hash · Accepted Answer · 2013-12-24 06:26:18Z

If you don't search for it, you cannot find it. So, basically you need to iterate through all the elements.

However, you may use some simple logic to at least help you with the performance.

Define a context

For example, you may have a really long HTML but within there, you may have a DIV where only inside of that div you may have your elements with the value "specificValue". In this case, you know that what you are looking for only resides within this div and only search within it.

You still have to go through all the elements but this time not within the whole HTML but only within the DIV that you expect the values to be.

So to summarize whether you use jQuery or plain javascript, you still have to go through all the elements. The solution is to narrow down the searchable "area" by defining a context and only searching within that..

E.g.

<html>
  <head>
    <title>some title</title>
  </head>
  <body>
  .
  .
  <div class="searchable">
   -- your elements that may have the value you will search
  </div>
  .
  .
  .
  <div class="searchable">
  -- your elements that may have the value again.
  </div>
  </body>
</html>

Mind you - you will have to itereate through all the elements again to find the divs with the class name "searchable". With jQuery $('.searchable') also does this. But you can also define a context for that and say $('.searchable', 'body') to narrow down that search area too..

Collectives™ on Stack Overflow

How to query elements by attribute value instead of attribute name

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related