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

Question

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

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

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

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

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

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

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

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