html属性和dom属性,DOM元素属性（Property）和特性（Attribute）的区别

我们知道DOM的实现就是把一个HTML文档映射为一棵DOM树，而DOM树上的每个节点其实就是一个javascript对象。所以DOM元素属性和普通对象的属性一样，就是DOM对象这个javascript对象上的属性而已，我们可以直接在DOM对象上通过.或[]来获取和设置它们

DOM元素的属性(property)是该对象所拥有的属性，而特性(attribute)则是该元素在HTML中的所拥有的特性节点。property是对象属性，本身不操作特性节点，但可以覆盖HTML中的同名特性的效果，是js操作；attribute是DOM节点对象，只用于获取和设置HTML特性，是文本操作。

Property 属性

如果把DOM元素看成是一个普通的Object对象，那么property就是一个以名值对(name=”value”)的形式存放在这个Object对象中的属性。通过.、[]来进行设置、读取的属性，就跟Javascript里普通对象属性的读取差不多。

DOM有其默认的基本属性，而这些属性就是所谓的property，它们都会在初始化的时候再DOM对象上创建，如果在TAG对这些属性进行赋值，那么这些值就会作为初始值赋给DOM的同名property。

DOM里的基本属性如果没有明确写出来，也都是有的，只是值为空

attribute 特性

attribute特性节点都是在HTML代码中可见的，它的值只能够是字符串；直接写在标签上的属性，可以通过setAttribute、getAttribute进行设置、读取。

var myElement = document.getElementById('in_1');

console.log(myElement.id);//"in_1"

console.log(myElement.value);//"1"

console.log(myElement.sth);//undefind,因为DOM基本属性里没有这个"sth"属性

console.log(myElement.className);//"",空字符串。DOM基本属性有className(也就是class)属性，但没有值

//每一个DOM都有attributes属性，它的类型是NamedNodeMap

console.log(myElement.attributes);//NamedNodeMap {0: id, 1: value, 2: sth, id: id, value: value, sth: sth, length: 3}

因为class是javascript的关键字，所以class这个属性名改用className

var myElement = document.getElementById('in_1');

console.log(myElement.getAttribute('id'));//in_1

console.log(myElement.getAttribute('class'))//null

console.log(myElement.getAttributeNode('sth').name);//sth

console.log(myElement.getAttributeNode('sth').value);//whatever

console.log(myElement.getAttributeNode('sth').nodeName);//sth

console.log(myElement.getAttributeNode('sth').nodeValue);//whatever

console.log(myElement.attributes.sth);//'sth="whatever"',它是一个Attr类型的对象，拥有NodeType、NodeName等属性

一些注意的问题：

attribute(特性)，是我们赋予某个事物的特质或对象。

property(属性)，是早已存在的不需要外界赋予的特质。

对于一个input的value属性，myElement.value = new value，设置了一个新的值 ，但DOM节构没有变化，所以myElement.getAttribute("value")的值没有变成新值。如果用myElement.setAttribute('value','new value')设置了新值，DOM节构里也变成了新值，myElement.value的值也变成了新值

对于一个href,myElement.href返回的都是绝对路径，那怕是用myElement.href = xxx设置的是相对路径，myElement.getAttribute('href')返回的是元素href属性的字符串直接值，

对于一个元素的id、class等，property和 attribute是双向绑定

对于一个input的 disabled，使用myElement.setAttribute('disabled', xxx);设置为任何值都会是禁用，因为这样设置了disabled的值都是一个字符串，变成boolean都为true。只能用myElement.disabled = false取消禁用，取消禁用后：myElement.getAttribute('disabled')为null、myElement.disabled为false。

操作 attribute 特性

操作特性的 DOM 方法主要有三个，分别是 getAttribute()、setAttribute()和 removeAttribute()。这三

个方法可以针对任何特性使用，包括那些以 HTMLElement 类型属性的形式定义的特性。Element 类型是使用 attributes 属性的唯一一个 DOM 节点类型。attributes 属性中包含一个

NamedNodeMap。NamedNodeMap 对象拥有下列方法:

getNamedItem(name)：返回 nodeName 属性等于 name 的节点；

removeNamedItem(name)：从列表中移除 nodeName 属性等于 name 的节点；

setNamedItem(node)：向列表中添加节点，以节点的 nodeName 属性为索引；

item(pos)：返回位于数字 pos 位置处的节点。

attributes 属性中包含一系列节点，每个节点的 nodeName 就是特性的名称，而节点的 nodeValue就是特性的值。

var id = element.attributes.getNamedItem("id").nodeValue;

var id = element.attributes["id"].nodeValue;

element.attributes["id"].nodeValue = "someOtherId";

var oldAttr = element.attributes.removeNamedItem("id");

element.attributes.setNamedItem(newAttr);

var attr = document.createAttribute("align");

attr.value = "left";

element.setAttributeNode(attr);

alert(element.attributes["align"].value); //"left"

alert(element.getAttributeNode("align").value); //"left"

alert(element.getAttribute("align")); //"left"