本文详解如何在mutationobserver中为动态插入的dom节点（如无id、无class的`
在使用 MutationObserver 监听动态插入的 DOM 节点时，常需对特定类型的新元素（例如 <li>）立即应用样式。但若这些节点既无 id 也无 class，无法通过选择器精确定位，就必须直接操作其 DOM 实例的 style 属性。
关键在于：Element.style 是一个 CSSStyleDeclaration 对象，支持直接赋值标准 CSS 属性（驼峰命名），而非通过 setAttribute 或访问不存在的 .body 属性。
✅ 正确写法：
addedNode.style.background = 'red'; // 或更完整的写法（推荐兼容性与可维护性） addedNode.style.backgroundColor = 'red'; addedNode.style.padding = '8px'; addedNode.style.borderRadius = '4px';
❌ 常见错误及原因：
- addedNode.setAtribute("style", "...")：拼写错误（应为 setAttribute），且 setAttribute('style', ...) 虽能工作，但不如直接操作 style 对象高效、直观；
- addedNode.body.style.background = ...：addedNode 是 <li> 元素本身，没有 .body 属性（document.body 才有），此写法会抛出 Cannot read property 'style' of undefined 错误。
? 补充建议：
- 添加类型校验，确保 addedNode 是元素节点（避免处理文本节点、注释节点等）：
if (addedNode.nodeType === Node.ELEMENT_NODE && addedNode.nodeName === 'LI') { addedNode.style.backgroundColor = 'red'; } - 若需批量设置样式，可使用 Object.assign：
Object.assign(addedNode.style, { backgroundColor: 'red', fontWeight: 'bold', margin: '4px 0' }); - 注意：内联样式优先级高于外部样式表，但若原元素已有 !important 样式，可能被覆盖；必要时可在 CSS 中提高特异性，或改用 classList.add() 配合预设 CSS 类（更利于维护）。
总之，直接赋值 addedNode.style.propertyName 是最简洁、可靠、符合规范的方式——无需ID、无需Class，只依赖节点引用本身。
