本文教你用 Tampermonkey 编写简洁可靠的用户脚本，在网页加载完成后自动统计具有指定 class（如 main）的元素个数，并以弹窗形式展示结果。无需 JavaScript 基础，代码仅需一行核心逻辑，附完整可运行示例与关键注意事项。
本文教你用 tampermonkey 编写简洁可靠的用户脚本，在网页加载完成后自动统计具有指定 class（如 `main`）的元素个数，并以弹窗形式展示结果。无需 javascript 基础，代码仅需一行核心逻辑，附完整可运行示例与关键注意事项。
要实现“页面加载完毕后统计某 class 元素数量并弹窗显示”，推荐使用以下完整 Tampermonkey 脚本模板：
// ==UserScript==
// @name Count Elements by Class
// @namespace https://github.com/user/tampermonkey-scripts
// @version 1.1
// @description 统计页面中指定 class 的元素总数（例如 .main），加载完成后弹窗提示
// @author You
// @match *://*/*
// @grant none
// @run-at document-idle
// ==/UserScript==
(function() {
'use strict';
// 等待 DOM 完全就绪（等同于 DOMContentLoaded）
window.addEventListener('DOMContentLoaded', function() {
const className = 'main'; // ✅ 修改此处为你想统计的 class 名（不加点号，仅写名称）
const elements = document.querySelectorAll('.' + className);
const count = elements.length;
// 弹出友好提示（避免频繁干扰，建议开发时用 console.log 替代 alert）
alert(`共找到 ${count} 个元素匹配 class="${className}"`);
});
})();? 关键说明与最佳实践：
- @run-at document-idle 确保脚本在 DOM 构建完成但无需等待图片/资源加载，兼顾效率与可靠性；
- 使用 document.querySelectorAll('.main') 是标准、高效且兼容性极佳的选择（支持 IE9+）；
- querySelectorAll 返回的是静态 NodeList，.length 属性直接给出匹配元素数量，无需循环；
- 若目标 class 名含特殊字符（如连字符、下划线等），无需额外转义，只要符合 CSS 选择器规范即可（例如 .user-profile 可直接写 'user-profile'）；
- ⚠️ 注意：alert() 会阻塞页面交互，上线前建议替换为 console.log(...) 或更优雅的 DOM 提示（如浮动 badge）；
- 如需统计多个 class，可扩展为数组遍历，例如 ['main', 'sidebar', 'footer']。
✅ 小测试技巧：在浏览器控制台（F12 → Console）粘贴 document.querySelectorAll('.main').length 即可快速验证结果，再复制到脚本中确保逻辑一致。
掌握这一模式后，你还能轻松拓展功能——比如高亮所有匹配元素、导出统计结果至 CSV，或结合 MutationObserver 实时监听动态新增的同类元素。
立即学习“前端免费学习笔记（深入）”；
