应使用 document.queryselector 定位“共xx项”元素并动态更新文本,优先通过 data-count-display 等 data 属性选择器获取节点,确保 dom 加载完成后再执行,统一在筛选逻辑(含重置)后调用 updatecount 函数刷新,避免手动操作 dom 导致框架状态不同步。

用 document.querySelector 找到“共XX项”元素再更新文本
页面上那个“共XX项”不是静态文字,是 JS 动态生成的——所以不能靠改 HTML 源码硬写死。得先定位到它对应的 DOM 节点,再用 textContent 或 innerText 改内容。
常见错误现象:document.getElementById('count') 报错 Null,因为没加 ID;或者用了 getElementsByClassName 返回 HTMLCollection 却直接赋值,忘了取 [0]。
- 优先用
data-属性定位,比如document.querySelector('[data-count-display]'),比 class 更稳定(class 容易被 CSS 框架覆盖) - 如果只有 class 名,确认是否唯一:多个同名 class 时,
querySelector只取第一个,querySelectorAll需手动选索引 - 别在 DOM 加载前执行,确保脚本放在
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











