CODEWITHSUNDEEP
javascripthtmldom
Gopal Sharma
Gopal Sharma

Reputation: 825

querySelectorAll() match all h1's except from a div

I want to match all h1's on the document except from a div containing other h1's, currently i can do querySelectorAll('h1:not(.demo)) to get all h1's with except h1's with demo class.

But how can i do querySelectorAll('h1:not(div#demo)) or similar thing?

Below is a sample html

<body>
  <div><h1>First</h1> <h1>Second</h1></div>
  <div id="demo"><h1 class="demo">Third</h1></div>
  <div><h1>Fourth</h1></div>
<body>

Upvotes: 1

Views: 644

Answers (4)

Muhammed Albarmavi
Muhammed Albarmavi

Reputation: 24424

either this will work 

 document.querySelectorAll('div:not(#demo) h1')

or this 

document.querySelectorAll('h1:not(.demo)')

if you want to target all h1 where don't have a class attribute you can do this way

document.querySelectorAll('h1:not([class])')

read more about 👉 :not

Upvotes: 1

Banzay
Banzay

Reputation: 9470

You can exclude div from collection by this way: ':not(div) > h1':

var s = document.querySelectorAll(':not(div) > h1');
[...s].forEach((el) => el.innerHTML += ' changed');
<div >
      <h1>h inside div 1</h1>
</div>
<h1>h outside div 1</h1>
<div id="d2">
      <h1>h inside div 2</h1>
</div>
<h1>h outside div 2</h1>

You may set a selector ':not(#demo) > h1' then all h1 will be treated except those ones inside #demo:

var s = document.querySelectorAll(':not(#demo) > h1');
[...s].forEach((el) => el.innerHTML += ' changed');
<div >
      <h1>h inside div 1</h1>
</div>
<h1>h outside div 1</h1>
<div id="demo">
      <h1>h inside div #demo</h1>
</div>
<h1>h outside div demo</h1>

Upvotes: 0

Matt Ellen
Matt Ellen

Reputation: 11612

You can quite select the child headings from the divs with >h1

let h1 = document.querySelectorAll('div:not(#demo)>h1');

console.log(h1);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div><h1>First</h1> <h1>Second</h1></div>
<div id="demo"><h1 class="demo">Third (demo)</h1></div>
<div><h1>Fourth</h1></div>

Upvotes: 0

OliverRadini
OliverRadini

Reputation: 6466

You can first get all the divs except those you want to match, then run a query selector from those:

const divsWhichArentDemo = document.querySelectorAll('div:not(#demo)');
const h1sWhichArentInDemoDivs = Array.prototype.slice.call(divsWhichArentDemo)
  .map(div => Array.prototype.slice.call(div.querySelectorAll('h1')))
  .flat();
  

console.dir(h1sWhichArentInDemoDivs);
<div>
  <h1>First</h1>
  <h1>Second</h1>
</div>
<div id="demo">
  <h1 class="demo">Third</h1>
</div>
<div>
  <h1>Fourth</h1>
</div>

Upvotes: 0

Related Questions