递归清理HTML元素的data-*属性需遍历element.attributes并反向删除，再递归处理el.children；须加深度守卫防栈溢出，避免操作childNodes和触发layout的属性，服务端应使用DOMDocument解析清理。
递归清理 HTML 元素的多层 data-* 属性
直接遍历并删除所有 data-* 属性，不能只靠 element.removeAttribute('data-xxx') 逐个写死——因为属性名是动态的，且嵌套子元素可能有更深的层级。必须用递归 + element.attributes 遍历组合实现。
- 先检查
element.attributes是一个NamedNodeMap，可用for循环遍历，但注意：边遍历边删除会改变索引，推荐反向循环或收集后批量删 - 对每个属性，用
attr.name.startsWith('data-')判断是否为 data 属性，再调用element.removeAttribute(attr.name) - 清理完当前元素，再递归调用自身处理
element.children（不用childNodes，避免文本节点报错） - 若需保留某些白名单 data 属性（如
data-id、data-type），改用!['data-id', 'data-type'].includes(attr.name)过滤
递归移除自定义属性时为什么子元素没被处理？
常见错误是只清了根节点，忘了递归入口。比如写了 cleanDataAttrs(el) 函数，但调用时漏掉对子元素的遍历逻辑，或用了 el.childNodes 却没过滤出元素节点，导致递归中断在第一层。
-
el.children只返回元素节点，安全可靠；el.childNodes包含文本/注释节点，访问.attributes会报Cannot read property 'attributes' of null - 不要在 for 循环中用
el.children.length做条件判断并同时调用cleanDataAttrs(el.children[i])——如果子元素被 JS 动态移除（如innerHTML = ''），children[i]可能已不存在，应先缓存const children = Array.from(el.children) - Vue/React 渲染的 DOM 中，部分 data 属性可能是运行时注入的（如
data-v-xxxx），这类属性通常不应手动清理，否则影响框架内部逻辑
递归深度过大导致浏览器卡顿甚至崩溃
DOM 树过深（例如 >12 层）+ 每层都查 attributes + 频繁调用 removeAttribute，会显著拖慢执行速度，低端安卓机上可能触发强制同步布局或栈溢出。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 加深度守卫：在函数参数里传入
depth = 0，递归前判断if (depth > 10) return，防止无限嵌套 - 避免在递归中读取
offsetHeight、getBoundingClientRect()等触发 layout 的属性 - 大数据量场景（如渲染上千节点的树形表格），建议用
requestIdleCallback分片处理，每次最多处理 50 个节点 - 若只是临时调试，可用 CSS 属性选择器一次性隐藏：
[data-test], [data-debug] { display: none !important; }，不修改 DOM 结构
PHP 或服务端预处理时怎么对应清理 HTML 属性？
前端递归清理是运行时行为，而服务端（如 PHP）输出 HTML 前就该剥离冗余属性——这时不能依赖 DOM，得用字符串或 XML 解析器处理。
- 用
strip_tags()不行，它只删标签，不碰属性 - 正则
preg_replace('/\s+data-[^\s>]+="[^"]*"/i', '', $html)简单但不可靠，会误伤属性值里的引号或换行 - 稳妥做法是用
DOMDocument加递归遍历：$node->hasAttributes()→ 遍历$node->attributes→startsWith('data-')→$node->removeAttributeNode($attr)→ 再递归$node->childNodes - 注意
DOMDocument::loadHTML()会自动补全缺失标签，若需保持原结构，记得设libxml_use_internal_errors(true)并禁用DOMDocument::recover
真正容易被忽略的是：data- 属性可能被 JS 框架用作状态标记（如 Alpine.js 的 x-data 依赖 data-alpine），盲目递归清理会导致交互失效。动手前先用 document.querySelectorAll('[data-]')（实际要用 document.querySelectorAll('[data^=""]') 模拟）扫一遍，确认哪些是真冗余、哪些是功能必需。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
