请求技术帮助：使用classList属性查找class为article的div并修正代码

原代码核心问题梳理 #

• document.querySelectorAll("div") 返回的是NodeList集合，无法直接对集合调用classList方法，需遍历单个元素操作
• classList.toggle()是切换类的方法，不是判断元素是否包含类的正确方式，应使用classList.contains()
• 条件判断中误用赋值运算符=，需改为比较运算符===
• 调用searchRes()时未传入参数，导致函数内部的allPosts为undefined
• 原HTML中第一个div的类名拼写错误：atricle → article（不修正的话永远找不到目标元素）
• console.log(allPosts.article)是错误的元素引用方式

修正后的完整代码 #

修正后的HTML

<div class="content article">
  <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 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>

修正后的JavaScript

const allPosts = document.querySelectorAll("div");
function searchRes(posts) {
  let foundArticle = null;
  // 遍历所有div元素，检查是否包含目标类
  posts.forEach(post => {
    if (post.classList.contains("article")) {
      foundArticle = post;
    }
  });
  
  foundArticle ? console.log(foundArticle) : console.log("该帖子未找到");
}
// 传入集合参数调用函数
searchRes(allPosts);

简化优化版（直接查找目标元素） #

如果不需要遍历所有div，可直接用querySelector精准查找，效率更高：

const article = document.querySelector("div.article");
article ? console.log(article) : console.log("该帖子未找到");

内容的提问来源于stack exchange，提问作者HUMANOID