如何使用DOM定位包含其他内容的div元素并添加类名

DevOps 小满

2026-8-18

解决为特定文本div添加类名及统一处理其他div的问题

问题分析

你当前代码的核心问题有两个：

最后一个判断条件divs[i].textContent === 'anything'完全不符合需求——你需要匹配的是所有非指定文本的div，而不是文本等于anything的div
多个独立的if语句逻辑冗余，虽然不会直接导致覆盖，但无法高效处理“其他情况”

解决方案1：使用else if + else 分支处理

通过else if串联指定文本的判断，最后用else统一处理所有不符合条件的div，同时加入trim()处理文本首尾空格（避免因空格导致匹配失败）：

const divs = document.querySelectorAll('div');
function classChanger () {
    for (let i = 0; i < divs.length; i++) {
        const text = divs[i].textContent.trim();
        if (text === 'High') {
            divs[i].classList.add('high');
        } else if (text === 'Medium') {
            divs[i].classList.add('medium');
        } else if (text === 'Low') {
            divs[i].classList.add('low');
        } else {
            divs[i].classList.add('none');
        }
    }
};

classChanger();

解决方案2：使用映射表优化逻辑（更易维护）

如果后续需要添加更多文本与类名的对应关系，用映射表的方式会更简洁，扩展性更强：

const divs = document.querySelectorAll('div');
// 建立文本与类名的映射关系
const textClassMap = {
    'High': 'high',
    'Medium': 'medium',
    'Low': 'low'
};

function classChanger () {
    divs.forEach(div => {
        const text = div.textContent.trim();
        // 从映射表中获取对应类名，不存在则使用none
        const targetClass = textClassMap[text] || 'none';
        div.classList.add(targetClass);
    });
};

classChanger();