如何使用JavaScript遍历指定class的div，筛选含mark标签的元素修改样式

问题核心原因 #

你现有代码仅在循环执行前全局查询了一次<mark>标签是否存在，只要页面内有任意匹配结果生成的<mark>，就会给所有.faq-question区块设置高亮，没有针对每个区块单独校验内部是否包含<mark>标签，才会出现全部高亮的问题。

修复后的实现代码 #

把<mark>标签的查询逻辑放到循环内部，针对每个.faq-question单独查询它的子节点中是否存在匹配标记即可：

// 可封装为函数，在搜索关键词匹配、mark标签生成完成后调用
function updateFaqDisplay() {
  const questions = document.getElementsByClassName("faq-question");
  for (let x = 0; x < questions.length; x++) {
    // 仅查询当前faq区块内部的mark标签
    const currentQuestionHasMatch = questions[x].querySelector("mark");
    if (currentQuestionHasMatch) {
      questions[x].style.backgroundColor = "#FFFF00";
      // 若需要隐藏不匹配区块，可加：questions[x].style.display = "block";
      console.log("shown");
    } else {
      questions[x].style.backgroundColor = "#FFFFFF";
      // 若需要隐藏不匹配区块，可加：questions[x].style.display = "none";
      console.log("hidden");
    }
  }
}

注意事项 #

• 这段代码需要在你动态生成<mark>标签的逻辑执行完成后再调用，才能保证判断准确，你可以绑定到输入框的input事件回调中，在关键词匹配逻辑跑完后触发。
• 若你后续需要完全隐藏不匹配的搜索结果，直接打开注释里的display属性设置即可，不需要调整核心判断逻辑。

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