document.querySelector exclude part of DOM

Question

My goal is to select h2, h3, h4 heading level elements in DOM except the ones that are inside docs-body__heading class

I tried this:

document.querySelectorAll(`:not(.docs-body__heading) h2, h2, h4`);

Doesn't work. So, how do I use querySelectorAll() on DOM excluding some part of it?

I think this article can help you: [css selctor selecting elements NOT having a certain class](https://stackoverflow.com/questions/9110300/can-i-write-a-css-selector-selecting-elements-not-having-a-certain-class-or-attr) — Ste, Apr 07 '20 at 11:43

score 2 · Accepted Answer · answered Apr 07 '20 at 11:59

The easiest is by first getting all the elements then filtering out the ones that you don't want:

const elems = [...document.querySelectorAll('h2,h4')]
  .filter( (elem) => !elem.matches('.docs-body__heading *') );

console.log(elems);

<div class="docs-body__heading">
  <h2>do not select me</h2>
  <div><h4>me neither</h4></div>
</div>
<div>
  <h2>select me</h2>
  <div><h4>and me</h4></div>
</div>

The fastest (in terms of performances) might be using a TreeWalker:

const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT, {
  acceptNode(elem) {
    return elem.matches('.docs-body__heading') ?
      NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT;
  }
}, true);
const elems = [];
while (walker.nextNode()) {
  const tagname = walker.currentNode.tagName;
  if (tagname === 'H2' || tagname === 'H4') {
    elems.push(walker.currentNode);
  }
}

console.log(elems);

<div class="docs-body__heading">
  <h2>do not select me</h2>
  <div>
    <h4>me neither</h4>
  </div>
</div>
<div>
  <h2>select me</h2>
  <div>
    <h4>and me</h4>
  </div>
</div>

But if you are not doing it in a kilometer long document with millions of DOM nodes, the first version should be largely enough.

Hirad Nikoo · Answer 2 · 2020-04-07T12:34:32.507

This one line will give you all you need!

document.querySelectorAll("*:not(.docs-body__heading) > h1, *:not(.docs-body__heading) > h2, *:not(.docs-body__heading) > h4");

Easier to read:

let not = "*:not(.docs-body__heading)";

document.querySelectorAll(`${not} > h1, ${not} > h2, ${not} > h4`);

Sample in use:

window.addEventListener('load', () => {
   var elems = document.querySelectorAll("*:not(.docs-body__heading) > h1, *:not(.docs-body__heading) > h2, *:not(.docs-body__heading) > h4");
   for(var i = 0 ; i < elems.length ; i++) {
      elems[i].style.backgroundColor = "red";
   }
});

<html>
    <head>Selector</head>
    <body>
        <h1>1</h1>
        <h2>2</h2>
        <h4>3</h4>
        <div class="docs-body__heading">
            <h1>1</h1>
            <h2>2</h2>
            <h4>3</h4>
        </div>
    </body>
</html>

score 0 · Answer 3 · answered Apr 07 '20 at 11:35

0

Now you are excluding elements that have the docs-body__heading class, to exclude element that are in it use:

document.querySelectorAll(`:not(.docs-body__heading > *) h2, h2, h4`);

answered Apr 07 '20 at 11:35

Daniel Geffen

1,777
1
11
16

I get not valid selector error. Also tried document.querySelectorAll(`:not(.docs-body__heading) > * h2, h2, h4`); this. Still doesn't work – Apr 07 '20 at 11:41

score 0 · Answer 4 · answered Apr 07 '20 at 11:48

0

I think it can be done only if the h2/h4 are direct childs of docs-body__heading

const x = document.querySelectorAll(":not(.docs-body__heading) > h2,h4");

console.log(x);

<div class="docs-body__heading">
  <h2>A</h2>
</div>
  <h4>B</h1>
  <h2>C</h1>

answered Apr 07 '20 at 11:48

naortor

2,019
12
26

Unfortunately, that's not the case, there are several elements in structure in-between – Apr 07 '20 at 11:51

document.querySelector exclude part of DOM

4 Answers4

Linked