本文介绍在使用mutationobserver监听动态插入的dom节点时，如何直接为无id、无class的元素（如li）设置内联css样式，避免因重复结构导致的选择器失效问题。
在前端开发中，当页面内容通过JavaScript动态生成（例如列表项由AJAX或模板引擎批量插入），且新增节点缺乏唯一标识（如id或特定class）时，传统CSS选择器或getElementById/getElementsByClassName将难以精准定位目标元素。此时，借助MutationObserver配合原生DOM属性操作，是实现“即时样式注入”的可靠方案。
关键在于：直接操作节点的style属性对象，而非尝试调用不存在的方法或访问非法属性。你原代码中的两个错误写法需特别注意：
❌ addedNode.setAtribute("style", "background: red")
→ setAttribute 拼写错误（应为 setAttribute），且对style属性使用字符串赋值会覆盖全部内联样式，不推荐；更严重的是，setAtribute根本不是标准方法。❌ addedNode.body.style.background = "red"
→ addedNode 是一个<li>元素，它没有body属性；body是document对象的属性，此处属于误用。
✅ 正确做法非常简洁：
if (addedNode.nodeType === Node.ELEMENT_NODE && addedNode.nodeName === 'LI') {
// 安全检查：确保是元素节点（排除文本、注释等）
addedNode.style.background = 'red';
// 或支持多属性：
Object.assign(addedNode.style, {
background: 'red',
color: 'white',
fontWeight: 'bold'
});
}⚠️ 注意事项：
- addedNode 可能是文本节点（nodeType === 3）或注释节点（nodeType === 8），务必先通过 addedNode.nodeType === Node.ELEMENT_NODE 过滤；
- 若需添加CSS类而非内联样式（更利于维护和复用），可使用 addedNode.classList.add('highlighted')，并提前在CSS中定义 .highlighted { background: red; }；
- 多次触发观察器时，建议增加防重逻辑（如检查是否已应用样式），避免重复设置；
- style 属性仅影响内联样式，权重高于外部CSS，但低于!important声明——若样式未生效，请检查是否有更高优先级规则覆盖。
综上，无需ID或class，只要在节点被插入DOM的瞬间捕获它，即可通过element.style.xxx直接控制视觉表现——这是动态DOM场景下轻量、高效、精准的样式控制方式。
