如何用startsWith修改以C/F开头的<li>元素（仅修改JS）

原代码的问题分析 #

1. 错误调用startsWith方法：直接在DOM元素对象上调用startsWith，但该方法属于字符串方法，必须先获取<li>的文本内容后再调用。
2. 逻辑运算符误用：判断条件使用&&（逻辑与），要求元素同时以C和F开头，这显然不可能达成需求，应替换为||（逻辑或）。
3. 不必要的循环终止：else分支里的break会让循环在遇到第一个不满足条件的元素时直接停止，导致后续符合要求的元素（比如示例里的Cat）无法被检查。

修正后的JavaScript代码 #

function exercice() {
    var x = document.querySelectorAll("li");

    for (let i = 0; i < x.length; i++) {
        // 获取<li>文本内容并去除首尾空白
        var liText = x[i].textContent.trim();
        var liStartsWithC = liText.startsWith("C");
        var liStartsWithF = liText.startsWith("F");

        // 满足任一条件则添加类
        if (liStartsWithC || liStartsWithF) {
            x[i].classList.add("bordure_verte");
        }
        // 移除break，不满足条件时直接进入下一次循环
    }
}

效果说明 #

点击按钮后，所有以C或F开头的<li>元素都会被添加上.bordure_verte类，对应示例中的Chien和Cat会显示绿色边框。

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