setattributens 对 html 元素无效，仅适用于 svg/mathml 或 xml 文档；html 中应使用 data-* 属性存储结构化元信息，或通过 class 约定 + 内存映射实现语义隔离。
setAttributeNS 在 HTML 编辑器里根本不能用在普通 HTML 元素上
直接结论：setAttributeNS 对 <div>、<code><p></p>、<span></span> 这类标准 HTML 元素无效——浏览器会静默忽略命名空间前缀，只当普通属性处理。它只对 SVG、MathML 等原生支持命名空间的元素起作用，或在 XML 文档中才按规范解析。
常见错误现象：你在富文本编辑器（如基于 contenteditable 的编辑器）里对一个 <span></span> 调用 el.setAttributeNS('http://example.com/ns', 'my:attr', 'val')，结果查 DOM 时发现属性变成了 my:attr="val"，但没有命名空间绑定，el.getAttributeNS('http://example.com/ns', 'attr') 返回 null。
- HTML5 解析器不维护命名空间映射表，所有元素默认属于
http://www.w3.org/1999/xhtml，且不允许用户扩展 -
setAttributeNS在 HTML 文档中调用时，若命名空间 URI 不是已知的 SVG/MathML 命名空间，浏览器会降级为setAttribute - 即使你手动在父元素加
xmlns:my="http://example.com/ns"，HTML 解析器也不会据此建立属性命名空间关联
想存自定义语义数据？用 data-* 属性 + JSON 序列化更可靠
HTML 编辑器场景下，真正需要的是“附着结构化元信息”，不是字面意义的 XML 命名空间。用 data-* 是唯一被 HTML 标准明确认可的方式。
例如，你想标记某段文本属于“校对稿第3版”且带作者 ID：
el.setAttribute('data-review', JSON.stringify({
version: 3,
authorId: 'usr_7a2f',
timestamp: Date.now()
}));
读取时直接解析：
const meta = JSON.parse(el.getAttribute('data-review') || '{}');
- 兼容所有浏览器，包括 IE11
- 不会污染渲染、不影响 CSS 选择器（
[data-review]可照常使用） - 比伪造命名空间更易调试：属性值可见、可搜索、可被 DevTools 编辑
- 避免和未来 HTML 新增的原生属性冲突（比如某天 HTML 加了
my:attr）
真要嵌入 SVG 或 MathML？必须用对应命名空间创建元素
只有当你在编辑器中动态插入 SVG 图形或数学公式时，setAttributeNS 才有意义。此时不能用 innerHTML 或 createElement('svg')，必须显式指定命名空间。
正确做法：
const svgNS = 'http://www.w3.org/2000/svg'; const svg = document.createElementNS(svgNS, 'svg'); svg.setAttributeNS(null, 'width', '100'); svg.setAttributeNS(svgNS, 'xlink:href', '#icon-check'); // 注意 xlink 命名空间
-
createElementNS创建的元素才有命名空间上下文，setAttributeNS才能生效 - HTML 元素的
getAttributeNS和removeAttributeNS在 SVG 子树内可用，但在外层 HTML 中调用会返回null或报错 - 别混用：不要在 SVG 元素上调用
setAttribute('xlink:href', ...)，必须用setAttributeNS否则链接失效
编辑器里模拟命名空间语义？靠 class 名约定 + 数据缓存
如果业务强依赖“命名空间前缀”做后端解析（比如导出为 XML），前端不必硬套 setAttributeNS，改用可预测的 class 命名 + 内存映射更可控。
例如统一约定：class="ns-my attr-version" 表示该元素携带 my:version 属性：
// 写入
el.classList.add('ns-my', 'attr-version');
editorData.set(el, { 'my:version': '2.1' });
<p>// 导出时收集
for (const [el, attrs] of editorData) {
if (el.classList.contains('ns-my')) {
Object.entries(attrs).forEach(([k, v]) => {
// 输出 <el my:version="2.1">
});
}
}</el></p>
- 完全规避 HTML 命名空间限制，DOM 干净、无副作用
- 支持任意复杂值类型（函数、对象引用等），不依赖字符串序列化
- 编辑器撤销/重做时，只需同步更新内存 Map，不用反复操作 DOM 属性
- class 名可被 CSS 选中用于临时高亮调试，比如
.ns-my { outline: 1px dashed blue; }
实际遇到的多数“需要命名空间”的需求，本质是数据隔离或语义标记，而不是 XML 兼容性。硬套 setAttributeNS 到 HTML 元素上，只会让 DOM 看似有命名空间、实则无法通过标准 API 读取，后期排查成本远高于初期选对方案。
