如何使用 Tampermonkey 脚本统计页面中指定 CSS 类的数量-js教程-PHP中文网

本文教你用 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 即可快速验证结果，再复制到脚本中确保逻辑一致。