替换html元素属性名需三步：先getattribute读值，再setattribute写新名，最后removeattribute删旧名；须校验元素和旧属性存在性，避免null写入或重复属性；禁用于class/style/value等反射属性。
用 JavaScript 的 setAttribute 替换指定属性名
HTML 元素的属性名不能直接“重命名”，只能先读取旧属性值，再用新属性名写入，最后删掉旧属性。核心操作就是 getAttribute + setAttribute + removeAttribute 三步。
常见错误是只调 setAttribute 却没删旧属性，结果变成两个同值属性并存（比如既有 data-old="123" 又有 data-new="123"），后续逻辑容易误判。
- 必须确保目标元素存在，否则
getAttribute返回null，直接传给setAttribute可能导致字符串"null"被写入 - 若旧属性不存在，
getAttribute返回null，建议加空值判断，避免意外写入 - 对
class、style、value等反射属性，不要用这套流程——它们有专门的 DOM 属性（如element.className）或行为（如input.value不受setAttribute实时影响）
const el = document.querySelector('#my-btn');
const oldValue = el.getAttribute('data-legacy');
if (oldValue !== null) {
el.setAttribute('data-current', oldValue);
el.removeAttribute('data-legacy');
}
批量替换多个元素的同一属性名（含兼容性注意）
用 document.querySelectorAll 拿到节点列表后，得用 forEach 或传统 for 循环逐个处理。不能直接在 NodeList 上链式调用 setAttribute —— 它不是数组，没有这些方法。
IE11 及更早版本不支持 NodeList.prototype.forEach，如果还要兼容，得转成数组或用 for 循环。
立即学习“前端免费学习笔记（深入）”；
-
querySelectorAll返回的是静态 NodeList，不用担心遍历时被 DOM 变动干扰 - 若替换的是
id或name这类可能影响表单提交或锚点跳转的属性，要确认页面其他逻辑是否依赖原值（比如 JS 里写了document.getElementById('old-id')） - 属性名大小写敏感：
data-Id和data-id是两个不同属性
document.querySelectorAll('[data-legacy]').forEach(el => {
const v = el.getAttribute('data-legacy');
if (v != null) {
el.setAttribute('data-v2', v);
el.removeAttribute('data-legacy');
}
});
用正则 + outerHTML 替换（仅限字符串级粗粒度操作）
这不是推荐做法，但当你面对的是整个 HTML 字符串（比如从接口拿到的片段、模板字符串、或服务端渲染输出），又不想走 DOM 解析，可以用正则匹配属性并替换。它快但脆弱：属性顺序、引号类型（单/双/无）、空格、换行都会让正则失效。
典型翻车场景：正则把 <div data-legacy="abc" class="x"> 中的 <code>data-legacy 换掉了，但漏掉了 <span data-legacy="xyz"></span>（单引号），或者误伤了 <p>data-legacy is a string</p> 这种文本内容。
- 必须用非贪婪匹配（
.*?），否则跨标签匹配会炸开 - 引号要同时覆盖
"、'和无引号情况，正则会变得极难维护 - 永远别在用户输入或不可信 HTML 上用这个方式，XSS 风险陡增
htmlString.replace(/data-legacy=(["'])(.*?)\1/g, 'data-new=$1$2$1');
Vue / React 等框架里别硬改属性名
在响应式框架中，属性由数据驱动。你手动用 setAttribute 改了 DOM 属性，下一次 re-render 会被框架覆盖。真要换属性名，得同步改数据源和模板里的绑定表达式。
比如 Vue 模板里写了 <mycomp :data-legacy="val"></mycomp>，光在 mounted 里改 DOM 没用；得改成 :data-new="val" 并更新 props 定义。
- 框架组件的 prop 名是定义死的，不等于 HTML 属性名——比如
disabledprop 会映射为disabledattribute，但customProp默认不会自动映射 - React 中用
data-*属性没问题，但自定义属性名需驼峰转短横线（dataMyAttr→data-my-attr），且必须确保是合法的 HTML5 自定义属性 - 服务端渲染（SSR）场景下，首次 HTML 输出的属性名必须和客户端 hydration 时一致，否则 React/Vue 会警告甚至丢弃节点
