直接用 document.querySelectorAll 配合属性选择器精准定位高亮元素，推荐添加临时 class 控制样式，配合 MutationObserver 动态响应 data-highlight 属性变化，并同步 aria 属性保障可访问性。
直接用 document.querySelectorAll 配合属性选择器就能精准定位并高亮，不需要框架或复杂监听。
用 querySelectorAll 找带 data-highlight 的元素
这是最常用也最可靠的起点。比如你想高亮所有标记了 data-highlight="true" 的元素：
-
document.querySelectorAll('[data-highlight="true"]')返回 NodeList，可直接遍历 - 如果只要存在该属性（不管值是什么），写成
[data-highlight] - 若值是动态生成的（如
data-highlight="error"），可配合includes或正则进一步过滤 - 注意：属性名区分大小写，
data-Highlight和data-highlight是两个不同属性
高亮逻辑别只改 background-color
单纯设背景色容易被原有 CSS 覆盖（比如元素本身有 !important 或更高优先级的样式）。稳妥做法是加临时 class：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 先定义一个高亮类：
.highlighted { background-color: #ffeb3b !important; outline: 2px solid #ffc107; } - 然后用
el.classList.add('highlighted')应用，比内联样式更可控 - 如果要支持取消高亮，记得保留
el.classList.remove('highlighted')的调用点 - 避免用
el.style.backgroundColor = '...'—— 它会污染内联样式，后续用 class 控制时容易冲突
动态响应属性变化要用 MutationObserver
如果 data-highlight 是后续 JS 修改的（比如异步加载后打标），靠一次性查询会漏掉新增元素：
立即学习“前端免费学习笔记（深入）”；
- 用
MutationObserver监听attributes，目标是data-highlight属性变化 - 回调中检查
mutation.attributeName === 'data-highlight'，再判断新旧值是否触发高亮条件 - 不要监听整个
document，指定父容器（如#main-content）能减少性能开销 - 老版本 IE 不支持，如需兼容，得降级为定时轮询
getElementsByClassName或自定义事件
真正容易被忽略的是：高亮状态和语义的错位。比如给一个 <button data-highlight="pending"></button> 加黄色背景，但屏幕阅读器并不知道这个颜色代表“待处理”——得同步加 aria-live 或 aria-label 才算完整。
