queryselectorall() 返回 nodelist，需转数组才能用 filter；遍历时应判断 nodetype 为 element_node；data-* 属性通过 dataset 访问，值为字符串需注意类型转换。
用 querySelectorAll() 做基础筛选最直接
浏览器原生支持，不用引入库，适合静态页面或轻量交互。它返回一个 NodeList，但不能直接调用 .filter() —— 必须先转成数组。
常见错误现象：
• 写 document.querySelectorAll('.item').filter(...) 报错 —— NodeList 没有 filter 方法
• 用 for...of 遍历时漏掉文本节点（比如换行符），导致样式错乱
实操建议：
• 总是包裹一层 Array.from() 或 [...nodeList]
• 筛选前加类型判断： if (el.nodeType === Node.ELEMENT_NODE)
• 示例：只取 class 含 product 且有 data-price 属性的元素
const items = Array.from(document.querySelectorAll('.product[data-price]'));
用 dataset 做条件过滤比解析文本更稳
从 data- 属性读值，比用 textContent 或正则匹配 HTML 字符串快且准。浏览器自动把 data-user-id 转成 dataset.userid，命名必须全小写、用短横线分隔。
容易踩的坑：
• el.dataset.price 返回的是字符串，直接比较 '100' 得到 <code>true（字典序）
• data-category="js framework" 中空格会导致 dataset.category 只拿到 "js"（只取第一个词）
• 某些旧版 Safari 对 dataset 支持不全，需 fallback 到 getAttribute('data-price')
实操建议：
• 数值类一律用 parseFloat(el.dataset.price) 或 parseInt(..., 10)
• 布尔类用 el.hasAttribute('data-in-stock')，别依赖 dataset.instock === 'true'
• 多条件组合时，把每个判断写成独立函数，再用 .every() 组合
用 FormData 读表单筛选条件时 name 必须对齐后端
前端 form 的 name 不只是用来提交，更是筛选逻辑的契约。如果后端接口要求参数是 ?brand=apple&rating=4，那 checkbox 就得写 name="brand"，而不是 name="ui_brand_filter"。
常见错误现象：
• 点击“Apple”+“Samsung”后，只拿到最后一个值 —— 用了 radio 而非 checkbox
• 价格区间输入为空时，FormData.get('price_min') 返回空字符串，但没做判空就传给 parseFloat，结果是 NaN
• URL 不同步、刷新丢失状态 —— 没把 FormData 序列化进 query string 或 localStorage
实操建议：
• 多选维度（品牌、标签）统一用 checkbox + 相同 name
• 区间类（价格、日期）拆成两个字段，如 price_min 和 price_max
• 读值时用 Array.from(formData.entries()) 得到二维数组，便于后续 .filter() 或构造 URL 参数
用 lxml 或 BeautifulSoup 解析服务端 HTML 时注意选择器差异
在 Python 环境下处理远程 HTML（比如爬虫、服务端预处理），lxml 和 BeautifulSoup 是主力。但它们的语法和行为不完全兼容：前者支持 XPath，后者主推 CSS 选择器；前者快，后者容错强。
容易被忽略的点：
• BeautifulSoup.find() 中 class 是 Python 关键字，必须写成 class_=（带下划线）
• lxml.xpath() 里 //div[@class='item'] 只能匹配 class 属性**完全等于** 'item' 的元素，不支持空格分隔的多 class；要用 contains(@class, 'item')
• select()（BS）和 xpath()（lxml）返回的数据结构不同：前者是列表，后者是字符串列表或元素对象列表，取文本要分别用 .get_text() 和 .text_content()
实操建议：
• 简单结构、容错优先 → 用 BeautifulSoup.select()
• 大量数据、性能敏感 → 用 lxml.xpath()，配合 html.fromstring()
• 提取属性值时，统一用 .get('href') 或 .attrib.get('href')，避免 KeyError
真正卡住人的往往不是语法，而是数据源头的不确定性：HTML 是否动态渲染、data- 属性是否被 JS 修改过、后端返回的 class 名是否带 hash、XPath 表达式是否受命名空间干扰。动手前先用 console.dir(el) 或 print(soup.prettify()) 看一眼真实结构，比硬猜快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
