2021-01-25

Attr节点类型

所有的元素数据（Html标签中定义的属性）在DOM中通过Attr类型表示，Attr节点具有以下特征：

• nodeType等于2 ；
• nodeName值为属性名 （name属性的值和nodeName一样）；
• nodeValue值为属性值（value属性的值和nodeValue一样）；
• parentNode值为null ；
• 在Html中不支持子节点 ；
  注意： 属性节点尽管是节点，却不是DOM文档树中的一部分；

创建节点对象，使用document.createAttribute(),参数为属性名：

//例如创建一个align属性节点：
let attr = document.createAttribute("align");

添加Attr节点到Element节点对象上：

//假设节点对象名为element：
element.setAttributeNode(attr);

attributes属性

element节点对象的attributes属性是一个NamedNodeMap实例，是一个类似于NodeList的“实时”集合。所有的Attr节点都在该集合中被引用。操纵这个NameNodeMap实例，是 通过该实例定义的三个方法来实现的：

• getNamedItem(name) , 返回nodeName属性等于name的Attr节点 ；
• removeNamedItem(name)，删除nodeName属性等于name的Attr节点；
• setNamedItem(AttrNode) , 向集合中添加Attr节点，索引为其nodeName；
• item(position) , 返回索引位置position处的Attr节点 ；

示例代码如下 ：

//获得集合中的Attr节点  ： 
let id = element.attributes.getNameItem("id");  //也可以是let id = element.attributes.getNameItem("id");
//读取Attr节点的nodeName和nodeValue :
console.log(id.nodeName + ":" + id.nodeValue);

//删除指定名字的元素数据 ：
let oldAttr = element.attributes.removeNamedItem("id");
//removeNamedItem()方法与Element节点对象上的removeAttribute()方法类似，都是删除指定名字的属性，不过removeNamedItem()的特殊之处在于，它会返回被删除的Attr节点。

//通过setNamedItem()方法为element节点对象添加Attr节点 ：
element.attributes.setNamedItem(newAttr); 

通常，因为使用起来更加方便,开发者更喜欢使用直接定义在Element节点对象上的setAttribute(),getAttribute(),removeAttribute() 这3个方法来添加Attr节点。

操纵Attr节点的三种方式的区别

如上述所言，元素数据（即HTML标签中的属性）在DOM的JS实现中被定义为Attr节点类型的实例，在js中操作Attr节点对象，无非就是以下这几种行为：

• 创建一个Attr节点对象 ；
• 将现成的Attr节点对象挂载到Element节点对象上，表现为attributes属性的集合中出现对Attr节点的引用，并且在Element节点对象上的相关属性也会被赋值。例如将一个 Attr节点title 挂载到Element节点对象上，则在element.attributes集合中会有对它的引用 ，element.title的值也会和element.attributes.getNamedItem(“title”).nodeValue保持一致（相互的）。
• 获得对Attr节点对象的引用 ；
• 删除Attr节点，更确切的说，是将Attr节点从Element节点对象上卸载，表现为Element节点对象上的属性值为"",attributes的集合中也不会出现对Attr的引用。卸载后，若没有保持对Attr节点的引用，则"游离"的Attr节点可能会被内存回收。

综合上述，对操作Attr节点的3种方式进行总结（） :

• 通过Element节点对象上定义setAttribute(),getAttribute(),removeAttribute这3个方法来间接的操作Attr节点。之所以说是间接的，体现在它们接受的参数并不是Attr节点，所以不需要提前获得对Attr节点的引用。但是在它们的执行体内部，比如setAttribute(),是要经历创建Attr节点和挂载Attr节点这两个过程的。所以这3个方法在内部封装了对Attr节点的直接操作。
• 通过Element节点对象上的+