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)');

我甚至试图获得与＆＃34; getElementsByClass（＆＃39; _5pcr userContentWrapper＆＃39;）＆＃34;相同的结果。有了这个：

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)');

Answer 2

你的问题就是把太多的空间放在不必要的地方：

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

Answer 3

querySelector()工作得很好，但你必须正确地传递选择器。多个类应该连接在一起，而不是像HTML中那样以空格分隔。

document.querySelector("._5pcr.userContentWrapper").classList.add("selected");

.selected { background-color:yellow; }

<div class="_5pcr userContentWrapper">Me</div>
<div class="_5pcr userContentWrapper _4nef">Not Me</div>

使用querySelector（）按类获取div并排除其他类

3 个答案: