vanilla javascript prefix begins with css selector

Question

Does anyone know a solid way to run a [class^='xyz-'] css selector search in vanilla js, without any libraries, on the whole dom without shutting down the browser?

Basically a $('[class^="xyz-"]').length check without the use of jQuery... it only needs to find one occurrence and can break; right after.

Thank you!

edit: should be cross browser & mobile, possibly ie7+

I could, but I could also ask on a community driven question and answer website if someone already knows a good way to do this without hacking around for 3 days and possibly ending up with a semi working solution. — Toby, Jul 22 '15 at 01:18
looking for slim libraries, all too big - then the latter as explained above. — Toby, Jul 22 '15 at 01:23
I voting to close this as too broad - if there was a reusable solution simple enough for a stackoverflow answer which worked reliably cross browser do you really think people would be using jQuery and its ilks? If you want a lead than look into [document.querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) and the various polyfills for it - like Sizzle. — max, Jul 22 '15 at 01:35

michaelpri · Answer 1 · 2015-07-22T01:44:30.210

5

You can use this combined with querySelector.

document.querySelector("[class^='xyz-']");

You could also do this with querySelectorAll if you need more than one element.

Here is a JSFiddle which will log items into the console.

edited Jul 22 '15 at 01:44

answered Jul 22 '15 at 01:20

michaelpri

3,521
4
30
46

need it to run on pretty much every browser - are there easy ways for a simple fallback without loading a massive library? – Toby Jul 22 '15 at 01:26
@Tobias Are you asking if it runs on every browser? – michaelpri Jul 22 '15 at 01:33
correct - I'm not sure if this supports older browsers – Toby Jul 22 '15 at 01:34
I'm pretty sure that this will work on older browsers, basically any browser that supports `querySelector` – michaelpri Jul 22 '15 at 01:37
@Tobias I've tested this on several older browsers, it has worked on all of them. It should fit your needs – michaelpri Jul 22 '15 at 01:42
I guess I could just put it into a try/catch... it seems to be supported from IE8+ – Toby Jul 22 '15 at 01:42
@Tobias After doing some research, I've found that `querySelectorAll` is the equivalent of using `$` in jQuery, so it has good cross-browser support. – michaelpri Jul 24 '15 at 01:44

Amadan · Accepted Answer · 2015-07-22T01:51:25.423

Easy enough with XPath. Faster, too.

var xpathResult = document.evaluate(
  'count(//div[starts-with(@class, "xyz-")])',
  document,
  null,
  XPathResult.ANY_TYPE, null);
snippet.log(xpathResult.numberValue);

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
 
<div></div>
<div class="xyz-foo"></div>
<div class="bar"></div>
<div></div>

A slow option (I believe IE6+):

function getElementsByClassNamePrefix(prefix) {
  var els = document.getElementsByTagName("*");
  var result = [];
  for (var i = 0; i < els.length; i++) {
    if (els[i].className.substr(0, prefix.length) == prefix) {
      result.push(els[i]);
    }
  }
  return result;
}
snippet.log(getElementsByClassNamePrefix('xyz-').length);

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
 
<div></div>
<div class="xyz-foo"></div>
<div class="bar"></div>
<div></div>

hmm... looks neat... http://stackoverflow.com/questions/4681968/document-evaluate-cross-browser says no IE support :/ I also need to have it run pretty much on any browser... incl. mobile — Toby, Jul 22 '15 at 01:26
That's true. If so, you're pretty much either limited to Sizzle/jQuery, or traversing DOM yourself and counting things manually (which is what Sizzle would do anyway). — Amadan, Jul 22 '15 at 01:35
If HTML is under your control, you could also set a `xyz` class whenever you set a `xyz-foo` class. Then finding all `.xyz` elements is easier, and existing polyfills can target it. — Amadan, Jul 22 '15 at 01:44

vanilla javascript prefix begins with css selector

2 Answers2