data属性仅作静态标记，必须由js读取并配合queryselectorall()或filter()实现筛选，否则无响应；命名需统一、小写、无空格，多值用逗号分隔；数值和日期须类型转换；隐藏元素宜批量操作以避免重排。
data属性必须和JS过滤逻辑绑定，否则只是静态标记
只写 data-category="js" 不会自动触发筛选——HTML 本身没有运行时判断能力。用户点击按钮后，必须用 JS 读取该属性值，再调用 querySelectorAll() 或数组 filter() 才能生效。
常见错误是把 data- 当成 CSS class 用：document.querySelectorAll('.js') 这样查不到任何东西，因为 data-category="js" 和 class js 完全无关。
- 所有筛选项（按钮、checkbox）和目标元素必须使用同一组
data-键名，比如统一用data-tag，不能有的写data-category、有的写data-type - 值要小写、无空格、无符号，
data-tag="react-native"比data-tag="React Native"更可靠，避免空格或大小写导致匹配失败 - 如果一个元素属于多个标签，用英文逗号分隔：
data-tag="javascript,typescript"，后续用.split(',').map(s => s.trim()).includes(value)判断
用 querySelectorAll() 直接筛选比遍历 DOM 快得多
别写 for (let i = 0; i ——这种手动循环既冗长又容易漏掉 <code>null 判断。
正确做法是让浏览器原生引擎干活：document.querySelectorAll('[data-tag="js"]') 一行就拿到全部匹配节点，且自动跳过没有该属性的元素。
- 多条件组合筛选时，用属性选择器拼接：
[data-tag="js"][data-status="active"] - 模糊匹配（如“包含 js”）不能靠 CSS 选择器，得转 JS 数组处理：
Array.from(document.querySelectorAll('[data-tag]')).filter(el => el.dataset.tag.includes('js')) - 注意
dataset自动转小写：data-user-id="123"→el.dataset.userid，命名时避开驼峰冲突
数值类 data 属性必须显式转换类型
data-price="299" 存的是字符串，直接 el.dataset.price > 200 会出错——因为字符串比较规则不同（'100' > '30' 是 false）。
所有涉及大小判断、范围筛选的字段，必须用 parseInt() 或 parseFloat() 转换：
-
const price = parseInt(el.dataset.price) || 0;——|| 0防止NaN导致整个过滤中断 - 日期类建议存为时间戳：
data-updated="1726845600000"，比存"2024-09-21"更易做范围比较 - 布尔值别存
"true"/"false"字符串，直接用存在性判断：el.hasAttribute('data-featured')
隐藏元素用 style.display 要注意重排开销
对几百个元素逐个设 el.style.display = 'none' 会触发多次 layout，页面明显卡顿。
更稳的做法是：先统一设为 display: none（CSS 初始化或 JS 批量设置），再只对匹配项设回 display: block（或你定义的显示值）。
- 避免在循环里反复读写样式，先收集所有匹配节点，再统一操作
- 如果表格或列表有固定高度 +
overflow-y: auto，隐藏行后容器高度不会自动收缩，滚动条可能卡住；此时改用el.hidden = true+ CSS[hidden] { display: none; }更安全 - 多选场景下，用
Set管理已选值，比数组includes()查找更快，尤其选项超过 20 个时
querySelectorAll() 或数组 filter()，点击就永远没反应。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
