如何用Tampermonkey修改指定span元素的值（页面加载前实现）

你之前用document.getElementById()没成功很正常——目标元素根本没有id属性呀！我们得通过类选择器来定位那个包含XXXX的span，而且要实现页面加载前修改（也就是用户看不到原内容闪现），得用更针对性的方法，下面给你两种可靠的方案：

方案一：MutationObserver监听DOM变化（推荐，适配动态加载元素） #

如果页面是动态生成这个div（比如通过AJAX、框架渲染），或者你想确保元素刚插入DOM就被修改，用MutationObserver是最优解，配合@run-at document-start让脚本提前启动：

// ==UserScript==
// @name         修改bzeTileValue下的span内容
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  页面加载时修改指定类下的span元素内容
// @author       You
// @match        替换成你的目标页面URL
// @run-at       document-start
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 创建观察者，监听DOM节点新增
    const observer = new MutationObserver((mutations) => {
        mutations.forEach(mutation => {
            mutation.addedNodes.forEach(node => {
                // 检查新增节点是否是我们要找的div
                if (node.nodeType === 1 && node.classList.contains('bzeTileValue') && node.classList.contains('bzeTileValueNegative')) {
                    // 定位到第二个span（原内容是XXXX的那个）
                    const targetSpan = node.querySelector('span:nth-child(2)');
                    if (targetSpan) {
                        targetSpan.textContent = '你的目标内容'; // 替换成你要的文本
                        observer.disconnect(); // 修改完成后停止监听，避免重复触发
                    }
                }
            });
        });
    });

    // 开始监听整个文档的子树变化
    observer.observe(document.documentElement, {
        childList: true,
        subtree: true
    });
})();

关键说明： #

• @run-at document-start：让脚本在页面开始解析就运行，抢占修改时机
• MutationObserver：能精准捕获到目标div被插入DOM的瞬间，立刻修改，完全不会出现原内容闪现
• 修改完成后调用observer.disconnect()：避免后续DOM变化重复触发修改，节省性能

方案二：直接定位静态元素（适合页面静态加载的场景） #

如果这个div是页面静态HTML里的（不是动态生成的），可以用更简洁的代码，配合@run-at document-body在DOM刚构建完成就修改：

// ==UserScript==
// @name         修改bzeTileValue下的span内容（静态页面版）
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  修改指定类下的span元素内容
// @author       You
// @match        替换成你的目标页面URL
// @run-at       document-body
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 同时匹配两个类的div
    const targetDiv = document.querySelector('.bzeTileValue.bzeTileValueNegative');
    if (targetDiv) {
        // 找到div下的第二个span
        const targetSpan = targetDiv.querySelector('span:nth-child(2)');
        if (targetSpan) {
            targetSpan.textContent = '你的目标内容';
        }
    }
})();

额外提示： #

• 一定要把@match后面的URL替换成你实际要操作的页面地址，比如https://your-target-site.com/*
• 优先用textContent而不是innerHTML：前者只修改文本，更安全，不会引入XSS风险；如果你确实需要插入HTML内容，再考虑用innerHTML
• 如果方案二偶尔出现原内容闪现，说明元素可能是动态加载的，切换到方案一即可

内容的提问来源于stack exchange，提问作者Elsyan1