XML的DOM的Attr接口有哪些属性？-XML/RSS教程-PHP中文网

xml dom中的attr接口暴露了name、value、specified和ownerelement四个核心属性。name是只读字符串，表示属性名称；value是可读写字符串，用于获取或设置属性值；specified是布尔值，指示属性是否在文档中明确指定；ownerelement指向拥有该attr对象的element节点。attr接口与element属性的区别在于：getattribute等方法返回的是字符串值，而attributes.getnameditem返回的是包含属性信息的attr对象；操作方式上，element.setattribute等方法更常用且直观；attr对象作为dom节点存在于元素的attributes集合中，而element.id等是javascript对象上的快捷访问器。安全修改属性推荐使用setattribute，删除属性则用removeattribute；若通过attr对象修改value也会生效，但删除后原attr对象可能变为“游离”状态。常见使用场景包括遍历元素所有属性、处理xml文档及检查属性原始状态。理解attr接口有助于掌握dom底层机制并在特定场景中灵活操作属性。

XML的DOM的Attr接口有哪些属性？

XML DOM中的Attr接口，它主要暴露了几个核心属性：name、value，以及一个历史遗留的specified。当然，还有一个非常关键的ownerElement，它指明了这个属性是属于哪个元素的。理解这些，基本上就抓住了Attr对象的核心。

要深入理解Attr接口，我们得从它在DOM树中的角色说起。一个Attr对象代表了XML或HTML元素的一个属性（attribute），比如<div id="myDiv">中的id="myDiv"。

Attr接口的属性：

name (只读字符串): 这个属性返回当前Attr对象的名称。比如，对于id="myDiv"，name就是"id"。这个是只读的，你不能直接通过修改Attr.name来改变属性名。如果想改名，你得移除旧的，再添加一个新的。
value (可读写字符串): 这个属性返回或设置当前Attr对象的值。对于id="myDiv"，value就是"myDiv"。你可以直接修改它，比如attrNode.value = "newDivId";，这会立即反映到它所属的元素上。
specified (只读布尔值): 这个属性现在在HTML DOM中已经基本不使用了，但在XML DOM中你可能还会遇到。它表示这个属性是否在原始文档中明确指定了。如果一个属性是默认值（比如在DTD或Schema中定义了默认值，而元素本身没有写出来），那么specified可能就是false。如果是在文档中明确写出来的，它就是true。不过，现代Web开发中，这个属性的实用性大大降低了，我个人很少关注它。
ownerElement (只读 Element 对象): 这个属性指向拥有当前Attr对象的那个Element节点。通过它可以反向找到属性所属的元素。这在遍历或处理DOM时非常有用，比如你想知道某个属性是哪个元素的。

Attr接口与Element属性有什么区别？

这个问题问得特别好，也经常让人感到困惑。在我看来，Attr接口代表的是一个“属性节点”本身，它是一个DOM对象，而我们平时说的“元素属性”更多是指通过element.getAttribute('id')或者直接访问element.id、element.className那种方式获取到的字符串值。

最主要的区别在于：

数据类型和表示形式： 当你使用element.getAttribute('someAttr')时，你得到的是一个字符串。而当你通过element.attributes.getNamedItem('someAttr')获取时，你得到的是一个Attr对象。这个Attr对象包含了属性的名称、值等信息，它本身是DOM树中的一个节点类型（虽然它不是Node.childNodes的一部分）。
操作方式： 直接操作element.getAttribute/setAttribute/removeAttribute通常更简洁，也更常用。这些方法直接处理属性的字符串值。而操作Attr对象，比如attrNode.value = "newValue"，则是直接修改这个属性节点的值。
节点身份： Attr对象是DOM树中的一个节点，虽然它不被认为是元素的子节点，但它确实存在于元素的attributes集合中。这意味着你可以像处理其他节点一样，获取它的nodeName、nodeValue等（尽管这些通常与name和value属性重叠）。而element.id或element.className等，它们只是JavaScript对象上的一个快捷访问器，或者说是对内部属性字符串值的一个映射。

我个人在日常开发中，除非需要遍历一个元素的所有属性（比如检查所有data-*属性），或者需要处理那些没有直接JS属性映射的XML属性，否则我更倾向于直接使用element.getAttribute()和element.setAttribute()，因为它们更直观，也更符合我们对“属性”的理解。Attr对象更多是DOM规范为了完整性而提供的一种表示方式。

如何安全地修改或删除Attr属性？

安全地修改或删除Attr属性，通常我们不直接操作Attr对象本身去删除它（比如attrNode.remove()，这是没有的），而是通过它的ownerElement来操作。最推荐且最安全的方式是使用Element接口提供的方法。

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

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

查看详情

修改属性值：
- 推荐方式： 使用element.setAttribute(name, value)。这是最常见、最直接、也最安全的方法。例如：myElement.setAttribute('class', 'new-class-name'); 如果属性不存在，它会创建；如果存在，它会更新。
- 通过Attr对象修改： 如果你已经获取到了一个Attr对象，可以直接修改它的value属性：attrNode.value = 'newValue'; 这也是安全的，因为Attr对象本身就是实时反映其所属元素属性状态的。
删除属性：
- 推荐方式： 使用element.removeAttribute(name)。例如：myElement.removeAttribute('id'); 这会从元素中彻底移除指定的属性。这是删除属性的标准方法。

需要注意的是，当你直接操作Attr对象的value时，这个改变会立即反映到DOM中。如果你获取了一个Attr对象，然后这个属性又被从DOM中移除了（比如通过removeAttribute），那么你之前获取的那个Attr对象可能就变成了一个“游离”状态，它不再属于任何元素。这种情况下，虽然你可能还能访问它的name和value，但它对DOM的实际影响就消失了。所以，在进行删除操作后，如果你还持有该Attr对象的引用，最好是将其设为null，避免潜在的混淆。

Attr接口在实际DOM操作中常见的使用场景是什么？

尽管我们前面提到，日常操作中element.setAttribute等方法更常用，但Attr接口在某些特定场景下，仍然能发挥其独特的作用，尤其是当你需要更细粒度地控制或检查属性时。

遍历元素的所有属性： 当你需要检查一个元素上所有存在的属性，而不仅仅是你知道名称的那些时，Attr接口就显得非常方便。Element.attributes属性返回一个NamedNodeMap（一个类似数组的集合），其中包含了所有的Attr对象。你可以迭代这个集合来获取每个属性的名称和值：
```
const myElement = document.getElementById('myDiv');
if (myElement) {
    for (let i = 0; i < myElement.attributes.length; i++) {
        const attr = myElement.attributes[i];
        console.log(`属性名: ${attr.name}, 属性值: ${attr.value}`);
        // 甚至可以检查它的ownerElement
        // console.log(`所属元素标签: ${attr.ownerElement.tagName}`);
    }
}
```
登录后复制
这种场景在处理自定义数据属性（data-*属性）或者需要动态生成HTML内容时特别有用，比如复制一个元素的所有属性到另一个新元素上。
处理XML文档： 在XML文档中，属性的语义可能比HTML更复杂，而且可能存在命名空间。虽然HTML DOM也支持命名空间属性（如setAttributeNS），但在XML DOM中，直接操作Attr对象可能更符合其节点模型的思维。例如，在XSLT处理前，你可能需要预处理XML文档的属性。
获取属性的"原始"状态或检查默认值： 尽管specified属性在HTML中用处不大，但在一些严格的XML解析场景中，它可能用于区分文档中明确声明的属性和通过DTD/Schema等方式获得的默认属性。虽然这在Web前端开发中非常罕见，但在后端或特定XML处理库中，它可能还有一席之地。