XML的DOM的NamedNodeMap接口怎么使用？

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');

// 获取该元素的属性集合，它是一个 NamedNodeMap
const attributesMap = myElement.attributes;

有了这个attributesMap，你就可以进行一系列操作了：

1. 获取属性节点： 你可以通过属性的名称来获取对应的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);
   }

   登录后复制

2. 添加或设置属性节点： 如果你想添加一个新属性，或者修改一个现有属性的值，你需要先创建一个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

   登录后复制

3. 移除属性节点： 通过属性的名称来移除它。

   // 移除名为 "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'); // 假设有 <div id="myDiv" class="container" data-info="example"></div>
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会更简洁，因为它返回的是一个字符串数组：

SpeakingPass-打造你的专属雅思口语语料

使用chatGPT帮你快速备考雅思口语，提升分数

25

查看详情

// 仅获取属性名和值，不直接操作 NamedNodeMap
const 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的时候，也绕了点弯子，觉得它们功能重叠。但仔细一想，设计者这么做肯定有其道理，就是为了区分你想要的是“属性这个对象”本身，还是“属性的值”。

1. NamedNodeMap.getNamedItem(name):

   • 返回类型： 返回一个Attr节点对象（如果找到），如果没找到则返回null。
   • 作用： 它给你的是属性的“身份证”，一个完整的Attr节点实例。这个Attr节点本身有name（属性名）、value（属性值）以及specified（是否由文档指定，而非默认值）等属性。当你需要对属性节点本身进行操作时，比如检查它的specified状态，或者需要将这个Attr节点作为参数传递给其他DOM方法时，getNamedItem()就派上用场了。

   const myElement = document.getElementById('myElement'); // 假设有 <div id="myElement" class="test"></div>
   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
   }

   登录后复制

2. Element.getAttribute(name):

   • 返回类型： 返回一个字符串（属性的值），如果没找到则返回null。
   • 作用： 它更直接，就是为了获取属性的值。这是最常用的方法，因为它满足了绝大多数场景下我们对属性的需求——就是想知道某个属性现在是什么值。它不需要你关心底层的Attr节点对象。

   const myElement = document.getElementById('myElement');
   const classValue = myElement.getAttribute('class');
   console.log('\n通过getAttribute获取：');
   console.log('属性值:', classValue); // test
   const 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接口怎么使用？的详细内容，更多请关注php中文网其它相关文章！