namednodemap在xml dom中用于处理元素的属性集合，其本质是一个类似字典的接口，允许通过名称或索引访问、添加、修改和删除属性节点。1. 它存储的是attr对象而非直接值；2. 可通过getnameditem(name)获取指定属性节点，或item(index)按索引访问；3. 使用setnameditem(attr)添加或替换属性；4. 通过removenameditem(name)移除属性；5. 遍历需用for循环结合length和item()方法；6. getnameditem返回attr节点对象，getattribute(name)仅返回属性值字符串；7. namednodemap也可用于documenttype的entities和notations，但日常开发少见。
NamedNodeMap在XML DOM中主要用来处理元素的属性集合。它是一个类似字典的接口，允许你通过名称或索引访问、添加、修改和删除元素的属性节点。你可以把它想象成一个特殊的小抽屉，专门用来存放某个HTML或XML标签的所有属性卡片，每张卡片上都写着属性的名字和值。
解决方案
在使用XML或HTML DOM解析文档时，每个Element节点都会有一个attributes属性，这个attributes属性就是NamedNodeMap类型。它存储着该元素的所有属性节点（Attr对象）。
要使用NamedNodeMap，首先你需要获取一个元素的attributes集合。比如，假设你有一个DOM元素myElement：
// 假设 myElement 是通过 document.getElementById 或其他方式获取到的一个DOM元素const myElement = document.getElementById('someElement');// 获取该元素的属性集合，它是一个 NamedNodeMapconst attributesMap = myElement.attributes;
有了这个attributesMap，你就可以进行一系列操作了：
获取属性节点：你可以通过属性的名称来获取对应的Attr节点。
// 获取名为 "id" 的属性节点const idAttrNode = attributesMap.getNamedItem('id');if (idAttrNode) { console.log('ID属性的名称:', idAttrNode.name); // 输出: id console.log('ID属性的值:', idAttrNode.value); // 输出: someElement}
或者，如果你知道属性的索引（虽然不推荐依赖索引，因为顺序不保证），也可以这样：
// 获取第一个属性节点const firstAttrNode = attributesMap.item(0);if (firstAttrNode) { console.log('第一个属性的名称:', firstAttrNode.name); console.log('第一个属性的值:', firstAttrNode.value);}
添加或设置属性节点：如果你想添加一个新属性，或者修改一个现有属性的值，你需要先创建一个Attr节点，然后把它设置到NamedNodeMap中。
// 创建一个新的属性节点const newAttr = document.createAttribute('data-custom');newAttr.value = 'my-value';// 将新属性节点添加到元素的属性集合中attributesMap.setNamedItem(newAttr);console.log(myElement.getAttribute('data-custom')); // 输出: my-value// 如果属性已存在，setNamedItem 会替换旧的同名属性节点const updatedAttr = document.createAttribute('data-custom');updatedAttr.value = 'updated-value';attributesMap.setNamedItem(updatedAttr);console.log(myElement.getAttribute('data-custom')); // 输出: updated-value
移除属性节点：通过属性的名称来移除它。
// 移除名为 "data-custom" 的属性const removedAttr = attributesMap.removeNamedItem('data-custom');if (removedAttr) { console.log('已移除属性:', removedAttr.name);}console.log(myElement.getAttribute('data-custom')); // 输出: null
我个人觉得，理解NamedNodeMap的关键在于，它不是一个简单的数组，更像是一个哈希表或者说字典，只不过它允许你用两种方式去摸索里面的东西——通过名字，或者通过一个序号（虽然序号访问在某些场景下不如名字直观和稳定）。它内部存储的是Attr对象，而不是直接的属性值字符串。
如何遍历一个元素的NamedNodeMap并获取所有属性？
遍历NamedNodeMap最常见且稳妥的方式是使用传统的for循环结合length属性和item()方法。由于NamedNodeMap并不是一个标准的JavaScript数组（它没有forEach或map等方法），所以不能直接使用数组的迭代方法。
const myElement = document.getElementById('myDiv'); // 假设有 const attributes = myElement.attributes;console.log('遍历元素的所有属性：');for (let i = 0; i < attributes.length; i++) { const attr = attributes.item(i); console.log(`${attr.name}: ${attr.value}`);}// 可能输出（顺序不一定）：// id: myDiv// class: container// data-info: example
我经常看到有人想当然地把它当成数组来操作，比如直接用for...of或者forEach，但它不是标准的数组，所以得用传统的循环方式。当然，如果你只是想获取属性的值，并且不关心属性节点本身，那么element.getAttributeNames()配合forEach或者for...of会更简洁，因为它返回的是一个字符串数组：
// 仅获取属性名和值，不直接操作 NamedNodeMapconst myElement = document.getElementById('myDiv');const attributeNames = myElement.getAttributeNames();console.log('n使用 getAttributeNames 遍历：');attributeNames.forEach(name => { const value = myElement.getAttribute(name); console.log(`${name}: ${value}`);});
这种方式在很多现代浏览器环境下是更推荐的，因为它更符合现代JavaScript的习惯，并且通常效率也不错。但如果你确实需要操作Attr节点本身（比如检查attr.specified属性，或者需要将Attr节点从一个元素移动到另一个元素），那还是得回到NamedNodeMap的item()方法。
NamedNodeMap中的getNamedItem()和getAttribute()有什么区别？
这俩方法，初学者确实容易混淆。我刚开始接触DOM的时候，也绕了点弯子，觉得它们功能重叠。但仔细一想，设计者这么做肯定有其道理，就是为了区分你想要的是“属性这个对象”本身，还是“属性的值”。
NamedNodeMap.getNamedItem(name):
返回类型： 返回一个Attr节点对象（如果找到），如果没找到则返回null。作用： 它给你的是属性的“身份证”，一个完整的Attr节点实例。这个Attr节点本身有name（属性名）、value（属性值）以及specified（是否由文档指定，而非默认值）等属性。当你需要对属性节点本身进行操作时，比如检查它的specified状态，或者需要将这个Attr节点作为参数传递给其他DOM方法时，getNamedItem()就派上用场了。
const myElement = document.getElementById('myElement'); // 假设有 const classAttrNode = myElement.attributes.getNamedItem('class');if (classAttrNode) { console.log('通过getNamedItem获取：'); console.log('属性名:', classAttrNode.name); // class console.log('属性值:', classAttrNode.value); // test console.log('是否由文档指定:', classAttrNode.specified); // true}
Element.getAttribute(name):
返回类型： 返回一个字符串（属性的值），如果没找到则返回null。作用： 它更直接，就是为了获取属性的值。这是最常用的方法，因为它满足了绝大多数场景下我们对属性的需求——就是想知道某个属性现在是什么值。它不需要你关心底层的Attr节点对象。
const myElement = document.getElementById('myElement');const classValue = myElement.getAttribute('class');console.log('n通过getAttribute获取：');console.log('属性值:', classValue); // testconst nonExistentValue = myElement.getAttribute('data-nonexistent');console.log('不存在的属性值:', nonExistentValue); // null
总结一下：如果你仅仅需要获取一个元素的某个属性的字符串值，getAttribute()是更简洁、更直接的选择。如果你需要访问属性的更多元数据（比如它的名字、或者它是否是默认值），或者需要操作Attr节点本身（比如将其从一个元素移动到另一个），那么NamedNodeMap.getNamedItem()就是你需要的。大多数时候，我们其实只关心属性的值，所以getAttribute()的用武之地更广。
除了属性，NamedNodeMap还能存储其他类型的节点吗？
理论上讲，DOM标准里确实提到过DocumentType接口的entities和notations属性也是NamedNodeMap类型的。它们分别用于存储XML文档中的实体（Entity节点）和符号（Notation节点）。
DocumentType.entities: 这是一个NamedNodeMap，包含文档中定义的所有通用实体（general entities）。DocumentType.notations: 这也是一个NamedNodeMap，包含文档中定义的所有符号声明。
但说实话，在日常的Web开发中，你几乎不会碰到需要直接操作这些东西的场景。这些接口更多地出现在处理XML文档（特别是那些包含复杂DTD声明的XML）的低层解析器或特定工具中。浏览器中对HTML DOM的操作，NamedNodeMap几乎就等同于元素的attributes集合。我个人在实际项目中，除了处理元素属性，还真没怎么主动去和NamedNodeMap的其他用途打过交道。
如果你处理的是纯粹的XML文档，并且需要深入到DTD或Schema定义的实体和符号层面，那么你可能会遇到DocumentType下的NamedNodeMap。但在常规的HTML和SVG操作中，NamedNodeMap就是为Element的attributes而生的。所以，在绝大多数前端开发场景下，你可以把NamedNodeMap和元素属性划等号，这并不会让你错过什么重要的东西。
以上就是XML的DOM的NamedNodeMap接口怎么使用？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1429905.html
微信扫一扫 
支付宝扫一扫 
