Geek Answers Handbook

How to request elements by attribute value instead of attribute name

So this is an interesting question, and it is very impossible to do it effectively. But I'm interested in finding an effective way to request all html elements in a document that have a specific value set for any attribute. So, for example, instead:

document.querySelectorAll('[attrName]');

I am looking for the equivalent of the following pseudocode:

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

Thus, essentially the result will be all elements that have any attribute whose value matches "specificValue". I know that there are rough ways to do this, for example:

 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 like to avoid parsing every html element like this. Any ideas?

Edit:

Thanks for all the help. Before too many people give alternative suggestions, I must explain why this is necessary. In principle, this is an experiment. The idea was that I could create live bindings to objects in real time, like what you get in Ember.js, but instead of collecting templates, you can just use regular html attributes and have a syntax marker in value, you need to create a binding. For example: <a href="{{linkLocation}}"></a> . I thought it might be interesting if there was an effective way to select the appropriate elements on the fly. It is clear that I know that the cycle should happen somewhere. However, if the browser runs its own iteration, I would prefer my own JavaScript loop. I was just not sure if there was any “secret” selector syntax that I did not know about, or anyone could think of other interesting tricks.

+6
source share
2 answers

I would not worry too much about performance at the moment, but focus on code efficiency. If you do not want to enter any jQuery and just use vanilla JS, I would just save your attribute values ​​in the class name. For example, if you have the following HTML element:

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

I would put integer attributes and values ​​in the class name, e.g.

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

Then you can simply use the already built-in method to select each element with the above class name.

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

If you want to use jQuery, everything becomes simpler because you can simply select an element by the attribute selector and work in all browsers.

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

+1
source

If you are not looking for him, you cannot find him. So basically you need to iterate through all the elements.

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

Define context

For example, you may have very long HTML, but inside it there may be a DIV, where only inside this div you can have your own elements with the value "specificValue". In this case, you know that what you are looking for is only inside this div and only searches inside it.

You still have to go through all the elements, but this time not in all the HTML, but only in the DIV that you expect from the values.

So, to generalize using jQuery or plain javascript, you still have to go through all the elements. The solution is to narrow down the search "area" by defining the context and searching only within it.

eg.

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

Keep in mind - you will have to repeat all the elements to find divs with the class name "searchable". Using jQuery $('.searchable') it also does. But you can also define the context for this and say $('.searchable', 'body') to narrow your search too.

0
source

More articles:


All Articles