javascript - 使用 querySelector() 按类获取 div 并排除其他类

Question

我试图简单地获取所有第一个 div，同时排除第二个 div:

<div class="_5pcr userContentWrapper">
<div class="_5pcr userContentWrapper _4nef">

我搜索了一下，发现 querySelector 函数应该可以完成这项工作。但是我尝试了多个输入，但所有这些都导致了一个空列表。如果我使用 DOM 函数 getElementsByClass 它可以工作，但当然我得到了所有 div，还有我不想要的第二个。以下是我尝试的 querySelector 函数调用:

listOfPosterName = document.querySelectorAll('div._5pcr userContentWrapper:not(._4nef)');
listOfPosterName = document.querySelectorAll('DIV._5pcr userContentWrapper');
listOfPosterName = document.querySelectorAll('_5pcr userContentWrapper:not(_4nef)');
listOfPosterName = document.querySelectorAll('DIV.userContentWrapper:not(_4nef)');

我什至试图通过以下方式获得与“getElementsByClass('_5pcr userContentWrapper')”相同的结果:

listOfPosterName = document.querySelectorAll('_5pcr userContentWrapper');

那也没用。我认为这是一个问题，因为类之间的空间，但我也用一个类测试了它。

非常感谢您的帮助!

Answer 1

您没有正确编写选择器。

当你想选择一个有多个类的元素时，你会这样做:

document.querySelectorAll('.class1.class2.class3');

当您在选择器中留下一个 space 字符时，它就变成了所谓的 descendant 选择器。示例:

<div class="class1">
  <p class="class2"></p>
</div>

在这种情况下，可以使用 descendant 选择器选择 class2:

document.querySelector('.class1 .class2');

您的固定示例可能如下所示:

<div class="_5pcr userContentWrapper">
<div class="_5pcr userContentWrapper _4nef">

document.querySelectorAll('._5pcr.userContentWrapper:not(._4nef)');