我不明白的任务

Question

嗨，我有一个任务，我无法解决，练习是使用 classList 属性找到带有 class = "article" 的 div，否则返回这里找不到的帖子是 div 的代码

 <div class="content" class="atricle">
      <p>
        Lorem ipsum,<a href="#" class="link">link</a> dolor sit amet consectetur
        adipisicing elit. Quas quidem doloribus dolor, qui doloremque deleniti
        alias. Iure, praesentium at? Esse non assumenda enim id in molestiae
        earum neque hic numquam!
      </p>
    </div>
    <div class="content" class="news_post">
      <p>
        Lorem ipsum,<a href="#" class="link">link</a> dolor sit amet consectetur
        adipisicing elit. Quas quidem doloribus dolor, qui doloremque deleniti
        alias. Iure, praesentium at? Esse non assumenda enim id in molestiae
        earum neque hic numquam!
      </p>
    </div>

这是我的解决方案

const allPosts = document.querySelectorAll("div")
function searchRes(allPosts){
if(allPosts.classList.toggle("article") = true){
  console.log(allPosts.article)
}else{
  console.log("There is no articles")
}
}
searchRes()

请帮帮我：（

Answer 1

您需要确定您对完全匹配还是松散匹配感兴趣，即class完全等于article的div是精确匹配，而class包含article的div是松散匹配。 这就是为什么c是第二个结果的一部分，而不是第一个结果的一部分，而p不能是结果，因为即使它有一个匹配的类，它也不是div 。 请注意， articles class被正确地忽略了。

 let exactMatches = document.querySelectorAll("div[class=article]"); if (exactMatches.length) { let exactValues = [...exactMatches].map(item => item.innerHTML); console.log("Exact matches are: " + JSON.stringify(exactValues)); } else { console.log("No matches were found"); } let looseMatches = [...document.querySelectorAll("div[class*=article]")].filter(item => item.classList.contains("article")); if (looseMatches.length) { let looseValues = looseMatches.map(item => item.innerHTML); console.log("Loose matches are: " + JSON.stringify(looseValues)); } else { console.log("No matches were found"); }

 <div class="article">a</div> <div class="article">b</div> <div class="article something">c</div> <p class="article">d</div> <div class="articles something">e</div>

[...somevariable]将somevariable转换为数组，在我们的例子中， querySelectorAll的结果是一个类似数组的对象（更多信息请参见此处https://www.capscode.in/blog/what-is-array-like-object -in-javascript ) 因此，它没有filter方法，所以我将它转换成一个数组以便能够整齐地过滤它。