Restructuring DOM search?

JavaScript
1

As part of a Chrome extension I am searching the DOM for elements containing specific words inside each ID/Class.

Currently it looks something like:

"allSelectors": document.querySelectorAll("[id*='example'][class*='example']"),
"collapse": function () {
                for (var i = 0; i < MyObject.allSelectors.length; i++) {
                    // Manipulate MyObject.allSelectors[i] etc
                }
},

First, I would like to restructure it somehow (possibly using an array?) so that it is easy to add new selectors as doing it like this:

 document.querySelectorAll("[id*='example'][class*='example'][id*='other'][class*='other']")

Isn’t scaleable/good.

Secondly, I think document.querySelectorAll is very slow - the reason I am using it is because I need to search anywhere in an id/class (hence the use of *=) and cannot use a big external library (such as jQuery), as this is a small file and is being injected user side.

Is there an any solution to these problems? because if there are many matches then this slowness might become an issue.

2

Not sure what your first question is asking – from what you’ve posted, you can use any selector query just as you want to. Or do you mean, you want to support multiple selector queries all merged together?

For your second question, note that the [attr*=value] selector is not substring safe – for example, if the class name was “mothercare”, then [class*=“other”] would match that element.

But classes are space delimited, so you can use the [attr~=value] selector to find individual values within a class – for example, if the class name was “some other thing”, then [class~=“other”] would match that (but wouldn’t match “mothercare”).

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.