HTML本身无筛选能力，所有筛选必须由JavaScript实现；需用JS操作DOM、监听事件、结合data属性和防抖等技术动态控制元素显隐或请求后端分页数据。
HTML 本身不提供运行时筛选或条件过滤能力——它只是静态结构，所有“筛选”必须靠 JavaScript 实现。所谓“HTML 筛选”，实际是用 JS 操作 DOM 元素，根据属性、文本、数据属性等条件动态显示/隐藏或增删节点。
为什么直接写 <input type="search"> 不等于筛选
原生 <input type="search"> 只是一个带清空按钮的文本框，它不会自动关联任何列表或表格。没有 JS 绑定事件（如 input 或 keyup），它什么也不会过滤。
- 常见错误现象：
<datalist>被误认为是筛选组件——它只是输入建议，不控制已有内容的显隐 - 真正起作用的是监听用户输入后，用
querySelectorAll()找出匹配项，再逐个调用element.style.display = 'none'或classList.toggle() - 若数据来自后端，更推荐用分页 + 搜索参数（如
/api/items?q=xxx）而非前端全量加载后过滤，避免卡顿和内存压力
data- 属性是条件过滤最稳妥的标记方式
比起解析 innerText 或正则匹配 HTML 字符串，给每个可筛选项添加结构化元数据（如 data-category="js"、data-price="299"）能大幅提升过滤准确性和维护性。
- 示例：筛选价格 ≤ 300 的商品卡片
document.querySelectorAll('[data-price]').forEach(el => { const price = parseFloat(el.dataset.price); el.style.display = price <= 300 ? '' : 'none'; }); - 注意
dataset自动转小写且移除前缀（data-user-id→el.dataset.userid），命名需避开驼峰冲突 - 数值类条件务必用
parseFloat()或parseInt()转换，否则字符串比较（'100' < '30'）会出错
用 Array.from() + filter() 替代手动循环更安全
直接遍历 NodeList 并修改 style.display 容易因 DOM 变动引发索引错乱；先转数组再批量操作，逻辑更清晰、不易漏项。
立即学习“前端免费学习笔记（深入）”；
- 典型场景：表格行按关键词高亮而非隐藏
const rows = Array.from(document.querySelectorAll('tbody tr')); const keyword = input.value.toLowerCase(); rows.forEach(row => { const text = row.textContent.toLowerCase(); row.classList.toggle('highlight', text.includes(keyword)); }); - 如果需要支持多条件（如 category AND tag），把每个条件封装成函数，用
.every()组合：filters.every(f => f(item)) - 频繁触发（如实时搜索）记得加防抖，否则
input事件每敲一个字都重算一次，移动端尤其明显
最容易被忽略的是数据更新后的同步问题：用 JS 动态插入新元素时，必须重新绑定筛选逻辑，或者把过滤逻辑抽成纯函数，每次渲染后统一调用——静态 HTML 写得再漂亮，没跟上 JS 的生命周期，筛选就失效。
