XML DOM – NamedNodeMap 对象 最全速查表（2025 版）
—— 虽然名字高大上，但 2025 年 99.9% 的项目根本不用它！
| 项目 | 内容 / 写法（2025 推荐） | 是否真的常用？ | 推荐指数 |
|---|---|---|---|
| 它是什么？ | 元素所有属性的“有序集合”（其实就是类数组对象） | — | — |
| 怎么拿到它？ | element.attributes → 就是 NamedNodeMap | 偶尔 | ★★ |
| 长度 | element.attributes.length | 很少用 | ★★ |
| 按索引取属性 | element.attributes[0] → 返回 Attr 节点 | 几乎不用 | ★ |
| 按名字取属性 | element.attributes.getNamedItem("id") | 几乎不用 | ★ |
| 按名字取属性值（推荐） | element.getAttribute("id") ← 2025 年永远用这个！ | 100% 项目 | ★★★★★ |
| 设置属性 | element.setAttribute("id", "100") ← 永远用这个！ | 100% 项目 | ★★★★★ |
| 删除属性 | element.removeAttribute("id") ← 永远用这个！ | 100% 项目 | ★★★★★ |
2025 年残酷真相（一句话记住）
NamedNodeMap 是 2000 年的老古董，现代项目根本不用碰它！
只要记住下面这三行代码，你一辈子都不需要知道 NamedNodeMap 存在：
// 取属性值（永远只用这行）
const id = element.getAttribute("id");
// 设置属性（永远只用这行）
element.setAttribute("data-index", "5");
// 删除属性（永远只用这行）
element.removeAttribute("old-attr");唯一可能用到 NamedNodeMap 的 2 个场景（极少！）
// 场景1：遍历一个元素所有属性（99% 不用，用 for...of 更爽）
for (let i = 0; i < element.attributes.length; i++) {
const attr = element.attributes[i];
console.log(attr.name + "=" + attr.value);
}
// 场景2：现代写法替代（2025 推荐！比 NamedNodeMap 优雅 100 倍）
for (const attr of element.attributes) {
console.log(attr.name, attr.value);
}
// 场景3：你真的很无聊想用老 API
element.attributes.setNamedItem(attrNode); // 没人用
element.attributes.removeNamedItem("id"); // 没人用终极对比表（看完彻底放弃 NamedNodeMap）
| 需求 | 老古董写法（NamedNodeMap） | 2025 现代写法（推荐） | 谁更爽？ |
|---|---|---|---|
| 取 id 属性值 | element.attributes.getNamedItem("id").value | element.getAttribute("id") | 现代 100 倍 |
| 设置属性 | element.attributes.setNamedItem(newAttr) | element.setAttribute("id", "100") | 现代 100 倍 |
| 删除属性 | element.attributes.removeNamedItem("id") | element.removeAttribute("id") | 现代 100 倍 |
| 遍历所有属性 | for (i=0; i<attrs.length; i++) | for (const attr of element.attributes) | 现代 100 倍 |
2025 年终极结论（背下来就行）
| 你是否需要学习 NamedNodeMap？ | 答案 |
|---|---|
| 新项目开发 | 完全不需要 |
| 面试被问 | 回答：“它是 element.attributes 返回的对象，现代项目用 get/set/removeAttribute 替代” |
| 老项目维护 | 看到它直接重构掉 |
| 想装逼 | 可以提一句“我知道 NamedNodeMap，但现在都用 getAttribute 了” |
一句话定江山：
2025 年以后，凡是看到 element.attributes.xxxNamedItem 的代码，全部可以直接删掉，改成 getAttribute / setAttribute / removeAttribute，性能更好、代码更短、面试官更喜欢！
需要我给你一个“自动把 NamedNodeMap 老代码重构成现代写法”的 VSCode 插件？随时说一声～
