如何修改含多个类名的div元素文本？Tutor LMS Pro本地化问题

我是编程初学者，正在用Tutor LMS Pro搭建网站。这个插件的课程面板没有完全翻译成我的母语，我想通过JavaScript修改某个特定标题的文本，但尝试了几次都没生效。之前我成功修改过只有tutor-mb-24类的元素，本以为给同时包含多个类的目标div用类似逻辑就行，结果代码完全没用，搞不懂问题出在哪。

目标元素的HTML代码 #

<div class="tutor-col-12 tutor-col-md-8 tutor-col-lg-9">
  <div class="tutor-dashboard-content">
    <div class="tutor-fs-5 tutor-fw-medium tutor-color-black tutor-capitalize-text tutor-mb-24 tutor-dashboard-title">
       Text I want to change
    </div>
  </div>
</div>

我尝试过的代码 #

代码1 #

document.getElementsByClassName("tutor-fs-5 tutor-fw-medium tutor-color-black tutor-capitalize-text tutor-mb-24 tutor-dashboard-title").textContent="New Text";

代码2 #

document.addEventListener('DOMContentLoaded', function() {
    var x1 = document.getElementsByClassName("tutor-fs-5 tutor-fw-medium tutor-color-black tutor-capitalize-text tutor-mb-24 tutor-dashboard-title");
    if (x1.length > 0) {
        x1[0].innerHTML = 'New Text';
    }
});

问题原因及解决方案 #

核心问题 #

1. getElementsByClassName使用误区：它支持空格分隔多个类名，但返回的是HTMLCollection类数组对象，直接给它赋值textContent肯定无效（代码1的问题）；代码2虽然取了第一个元素，但Tutor LMS Pro的仪表盘内容可能是AJAX异步加载的，DOMContentLoaded触发时目标元素还没渲染到页面，所以找不到元素。
2. 选择器冗余且易失效：用一堆类名组合当选择器，不仅冗余，还可能因为插件更新类名变化导致失效。

修正方案 #

方案1：精准选择器+延迟执行

用querySelector写简洁的复合选择器，配合setTimeout给元素加载留时间：

document.addEventListener('DOMContentLoaded', function() {
    setTimeout(function() {
        const targetTitle = document.querySelector(".tutor-dashboard-content .tutor-dashboard-title");
        if (targetTitle) {
            targetTitle.textContent = "New Text";
        }
    }, 1000); // 延迟时间可根据页面加载速度调整
});

方案2：DOM监听（更可靠）

如果延迟时间不好把握，用MutationObserver监听DOM变化，等目标元素出现再修改：

const observer = new MutationObserver(function(mutations) {
    const targetTitle = document.querySelector(".tutor-dashboard-content .tutor-dashboard-title");
    if (targetTitle) {
        targetTitle.textContent = "New Text";
        observer.disconnect(); // 修改完成后停止监听
    }
});

// 先尝试监听父容器，不存在则监听整个文档
const dashboardContent = document.querySelector(".tutor-dashboard-content");
if (dashboardContent) {
    observer.observe(dashboardContent, { childList: true, subtree: true });
} else {
    observer.observe(document.body, { childList: true, subtree: true });
}

方案3：优先用插件自带翻译功能（更推荐）

Tutor LMS Pro本身支持本地化翻译，你可以用Loco Translate这类插件直接翻译插件文本，不用写JS代码，更稳定。

内容的提问来源于stack exchange，提问作者Łukasz Wójcik