最稳妥做法是先用getAttributeNames()获取属性名数组再筛选删除；直接遍历el.attributes不可行，IE不支持该方法需降级处理；innerHTML替换会丢失事件、状态和焦点；需避免MutationObserver干扰及大小写误判。

用 getAttributeNames() 配合 removeAttribute() 最稳妥

直接遍历 el.attributes 不行——它是个动态的 NamedNodeMap，不是数组，不能用 filter 或 forEach；IE 下甚至无法用扩展运算符转数组。正确做法是先调 getAttributeNames() 拿到标准字符串数组，再筛选、删除：

• 匹配前缀：用 name.startsWith('data-temp-') 或 name.match(/^x-/)
• 逐个删：对每个匹配名调 el.removeAttribute(name)，不触发重排
• IE 兼容：若需支持 IE，改用 Array.from(el.attributes).map(attr => attr.name)，但注意 IE11 不支持 getAttributeNames，必须降级

别碰 innerHTML 替换属性——会丢事件和状态

有人想用正则从 innerHTML 字符串里删属性再重新赋值，这非常危险：

• el.innerHTML = el.innerHTML.replace(/ data-temp-\w+="[^"]*"/g, '') 会销毁所有绑定的事件监听器
• 表单控件（input、select）的当前值、焦点、滚动位置全部丢失
• 自定义元素或框架（如 Vue/React）的内部状态可能断裂

批量删属性时要注意 MutationObserver 干扰

如果页面已注册了 MutationObserver 监听属性变更，边遍历边删可能触发多次回调，甚至造成无限循环：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 稳妥做法：先收集要删的属性名数组，再统一调 removeAttribute
• 避免在 TreeWalker 遍历中直接删——walker.nextNode() 内部状态可能与 DOM 实际不一致
• 若目标元素可能被异步移除，删之前加 el.isConnected 检查

常见误判：hasAttribute 和 getAttribute 返回值的区别

判断属性是否存在，别用 el.getAttribute('data-foo') !== null，因为：

立即学习“前端免费学习笔记（深入）”；

• getAttribute('data-foo') 对未设置的属性返回 null，对设为空字符串的返回 ""，两者都该删
• hasAttribute('data-foo') 只看属性是否声明，不管值是什么，更准确
• 但批量清理前缀时，还是得靠 getAttributeNames() 列出所有名，否则漏掉 data-foo="" 这类空值属性

真正容易被忽略的是：属性名大小写敏感，且 HTML 解析后全转为小写。比如你在源码写 DATA-TEMP-ID，JS 里拿到的仍是 data-temp-id。别在正则里写 /DATA-/i——没用。