如何让同一段JavaScript代码同时作用于getElementsByClassName返回的两个对象

你只要把处理单个元素的逻辑封装为通用函数，遍历所有匹配到的元素执行即可，修改后的代码如下：

// 获取所有匹配的.th元素
var textList = document.getElementsByClassName("th");
var animationDelay = 6;

// 封装单个元素的处理逻辑
function processTextEl(text) {
    var newDom = '';
    for(let i = 0; i < text.innerText.length; i++) {
        newDom += '<span class="char">' + (text.innerText[i] == ' ' ? '&nbsp;' : text.innerText[i])+ '</span>';
    }
    text.innerHTML = newDom;
    var length = text.children.length;
    for(let i = 0; i < length; i++) {
        text.children[i].style['animation-delay'] = animationDelay * i + 'ms';
    }
}

// 遍历所有匹配元素，逐个执行处理
for (let i = 0; i < textList.length; i++) {
    processTextEl(textList[i]);
}

改动说明 #

• 原代码直接把获取到的元素集合覆盖为第一个元素text[0]，导致只能处理第一个匹配对象，现在保留完整的元素集合遍历执行，即使后续站点匹配到更多.th元素也能自动适配，不需要额外修改代码
• 把重复的处理逻辑封装为独立函数，避免冗余代码，后续调整动画参数只要修改一处即可
• 已移除原代码末尾多余的闭合大括号

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