Question

我想匹配文档中所有h1，除了包含其他div的{{1}}之外，目前我可以h1来获取所有{{具有演示类的querySelectorAll('h1:not(.demo))除1}}。

但是我该怎么做h1或类似的事情？

下面是一个示例html

h1

Answer 1

这两种方法都可以

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

或此

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

如果要将所有 h1 定位到没有类属性的位置，则可以这样做

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

详细了解:not

Answer 2

您可以先获取所有要匹配的divs ，然后从其中运行查询选择器：

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>

Answer 3

您可以使用>h1

从div中完全选择子标题。

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>

Answer 4

您可以通过以下方式将div从集合中排除：':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>

您可以设置选择器':not(#demo) > h1'，然后所有h1都将被处理，#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>

querySelectorAll（）匹配除div外的所有h1

4 个答案: