我不明白的任务

Question

Hi i have one task and I can't solve,the excercise is find div with class = "article" using classList property,else return what that post is not found here is a code of divs

 <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>

here is my solve

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()

help me please:(

Answer 1

You will need to determine whether you are interested in exact or loose matches, that is, a div with a class being exactly equal to article is an exact match, while a div whose class is containing article is a loose match. This is why c is part of the second result, but not of the first, whereas p cannot be a result, because, even though it has a matching class, it's not a div . Note that the articles class is correctly ignored.

 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>

The [...somevariable] converts somevariable into an array, in our case, the result of querySelectorAll is an arraylike object (see more here https://www.capscode.in/blog/what-is-array-like-object-in-javascript ) and as such, it des not have a filter method, so I converted it into an array in order to be able to neatly filter it.