如何为无ID/Class的目标LI节点设置样式？MutationObserver设置失效

一、先修复样式设置的错误 #

你代码里有两个低级错误导致样式不生效：

1. 拼写错误：setAtribute 应该写成 setAttribute
2. 错误的节点引用：addedNode.body 完全不对——LI本身就是DOM元素，直接操作它的style属性就行

修复后的基础样式设置代码片段：

if (addedNode.nodeName === "LI") {
    // 直接设置行内样式
    addedNode.style.background = "red";
    // 或者用setAttribute（不推荐，会覆盖原有行内样式）
    // addedNode.setAttribute("style", "background: red;");
}

二、定位无ID/Class的目标LI节点 #

因为所有新增LI的ID/Class重复，只能通过节点的独有特征来筛选，常见的判断维度有这些：

• 文本内容：判断节点的文本是否匹配目标内容
• 子元素结构：比如检查节点是否包含特定类型的子元素（如<span>、<img>）或子元素的特征
• 自定义属性：比如节点是否带有特定的data-*属性
• 位置关系：比如判断它是父容器的第N个子节点，或者在某个特定节点之后
• 组合条件：把多个条件结合，提升定位精准度

三、完整示例代码 #

比如要定位文本为"待处理任务"的LI节点并设置样式：

const targetNode = document.getElementById('myElement');

let observer = new MutationObserver(mutations => {
    for(let mutation of mutations) {
        for(let addedNode of mutation.addedNodes) {
            // 先确认是LI元素，且是元素节点（排除文本节点等）
            if (addedNode.nodeName === "LI" && addedNode.nodeType === 1) {
                // 自定义判断条件：文本内容匹配
                const targetText = "待处理任务";
                if (addedNode.textContent.trim() === targetText) {
                    // 设置样式
                    addedNode.style.background = "red";
                    // 也可以添加自定义类名（后续方便复用样式）
                    // addedNode.classList.add('target-li');
                }
            }
        }
    }
});

observer.observe(targetNode, { childList: true, subtree: true });

额外提示 #

• 尽量用classList.add()添加自定义类，而不是直接写行内样式——这样样式可以集中在CSS里，更易维护
• 如果判断条件复杂，可以封装成单独的函数，比如isTargetLI(node)，让代码更清晰

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