Search code examples
domfilterselectors-api

DOM querySelectorAll - element ID not starting with

In an HTML document I have a large inline SVG object with groups bearing a variety of IDs (or none at all). I want to find all groups other than those whose IDs start with the letter sequences l0pzlo, l1pzloand l2pzlo. The task of finding just those IDs is easy

element.querySelectorAll("[id^=l0pzlo_],[id^=l1pzlo_],[id^=l2pzlo_]")

does the trick. However, I cannot work out how to get only those elements whose IDs DO NOT start with any of the three prefixes given above. I have attempted to use :notin a variety of different ways, e.g.

element.querySelectorAll(:not('[(id^=l0pzlo)]'))";

but nothing seems to be to the liking of the browser. How can I do this?

Solution

  • I think it would be more useful to leave my own answer here rather than just delete the question

    element.querySelectorAll('*:not([id^=l0pzlo]):not([id^=l1pzlo]):not([id^=l2pzlo])');

    works. Think of it as going about the task of filtering in a non-greedy way. First you get absolutely everything and then progressively filter out what you don't need with a sequence of one or more :nots