querySelectorAll选择器错误导致卡片搜索异常的修复方法

原代码的选择器和DOM节点查找逻辑完全依赖元素位置，新增.sce-all容器破坏了原有的DOM层级关系，直接导致两个异常：

• 选择器.card div:nth-child(2)会匹配.card下所有「作为父元素第二个子节点的div」，不仅会选中目标标题，还会选中.sce-all容器本身，因此会把.sce-e里的内容纳入匹配范围
• 代码通过item.parentElement查找要隐藏的元素，当选中的item是.sce-tt时，它的直接父元素是.sce-all而非卡片根节点，因此会错误给.sce-all添加display: none，导致对应区域异常隐藏

放弃依赖位置的选择器和父节点查找逻辑，全部改用类名精准匹配元素：

• 直接通过.sce-tt类名选中所有需要参与搜索匹配的标题元素
• 通过closest('.card')查找每个标题对应的卡片根节点，不受嵌套层级变化影响
• 用textContent替代innerHTML做文本匹配，避免HTML标签、属性内容干扰匹配结果
• 直接绑定输入框事件，对搜索词做去空、转小写处理，空搜索时展示所有卡片

// 精准选中搜索输入框
const searchInput = document.querySelector('.searchbar');
// 精准选中所有卡片下的搜索匹配目标：sce-tt标题
const cardTitles = document.querySelectorAll('.card .sce-tt');

function search(e) {
  // 获取搜索关键词，统一转小写、去除首尾空格
  const keyword = e.target.value.trim().toLowerCase();
  cardTitles.forEach(titleEl => {
    // 找到当前标题所属的最外层卡片元素
    const cardEl = titleEl.closest('.card');
    // 匹配标题可见文本，忽略HTML标签
    const matchContent = titleEl.textContent.toLowerCase();
    cardEl.style.display = matchContent.includes(keyword) ? 'block' : 'none';
  })
}

searchInput.addEventListener("keyup", search);

原有HTML代码不需要做任何修改，替换JS即可正常运行。

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