本文介绍如何用 tampermonkey 编写简洁可靠的用户脚本，在网页加载完成后自动统计具有指定 class（如 main）的 dom 元素个数，并通过浏览器弹窗展示结果。适合 javascript 新手快速上手。
本文介绍如何用 tampermonkey 编写简洁可靠的用户脚本，在网页加载完成后自动统计具有指定 class（如 main）的 dom 元素个数，并通过浏览器弹窗展示结果。适合 javascript 新手快速上手。
要实现这一功能，核心是利用原生 JavaScript 的 document.querySelectorAll() 方法——它能高效选取所有匹配指定 CSS 选择器的元素，并返回一个静态 NodeList；其 .length 属性即为匹配元素总数。
以下是一个完整、可直接安装运行的 Tampermonkey 脚本示例（以统计所有 class="main" 的元素为例）：
// ==UserScript==
// @name Count Elements by Class
// @namespace https://github.com/user/tampermonkey-scripts
// @version 1.0
// @description 统计页面中指定 class 的元素数量并弹窗提示
// @author You
// @match *://*/*
// @grant none
// @run-at document-idle
// ==/UserScript==
(function() {
'use strict';
// 等待 DOM 就绪（Tampermonkey 的 document-idle 已保障，此处双重保险）
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', countAndAlert);
} else {
countAndAlert();
}
function countAndAlert() {
const className = 'main'; // ✅ 修改此处为你想统计的 class 名（不加点号）
const elements = document.querySelectorAll(`.${className}`);
const count = elements.length;
alert(`共找到 ${count} 个 class="${className}" 的元素`);
}
})();? 关键说明与注意事项：
- @run-at document-idle 确保脚本在 DOM 构建完成但资源（如图片）未全加载时执行，兼顾速度与可靠性；若需等待所有资源（如动态渲染内容），可改为 @run-at document-end 或监听 window.onload。
- 选择器字符串为 .${className}（注意开头的英文句点），这是标准 CSS 类选择器写法；切勿写成 'main' 或 '.main '（尾部空格会导致匹配失败）。
- 若目标 class 名含特殊字符（如连字符、数字开头），需确保其符合 CSS 命名规范；如遇 data-* 属性或复合类（如 class="main active"），querySelectorAll('.main') 仍可正确匹配（只要元素含有该类即可）。
- 生产环境中建议用 console.log() 替代 alert() 避免频繁打断操作；也可升级为 GM_notification()（需声明 @grant GM_notification）实现更友好的桌面通知。
掌握这一模式后，你只需修改 className 变量，即可复用于统计任意 class（如 'btn'、'product-item'），是前端自动化与页面分析的实用基础技能。
立即学习“前端免费学习笔记（深入）”；
