直接用 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 才算完整。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！