JS中Attribute 和 property的区别

对于Attribute 和 Property ，我们都称之为“属性”，那么他们到底有什么区别呢？上网搜了一些资料，在这总结一下我自己的理解。

1.Attribute

大家都知道，在DOM中的有三种节点类型：元素节点、文本节点和属性节点，这其中的属性节点就是我们所说的Attribute。

例如：<div  id="example">test</div>

"div"是元素节点，“test”是文本节点，id="example"就是属性节点。我们可以通过 getAttribute("id")获取属性值，也可以通过setAttribute("id","example")来设置或修改属性的值。由此我们可以看出，attribute是一种节点（即属性节点），是和元素节点一个级别的节点对象。

2.Property

property就是HTML对象的字段或者说属性（不是attribue），它既可以是元素节点对象的字段，也可以是属性节点对象的字段，还可以是文本节点对象的字段。

例如:<div  id="example">test</div>

获取div标签的值 var idValue =document.getElementById("title").nodeName;同样的用法还有document.getElementById("title").title,document.getElementById("title").id。也就是我们可以直接用“ . ”的形式来获取property的值。

3.总结

看到这，也许会有些迷惑，因为像“ID”、“class”等这样的属性既可以用attribute的方式取到，也可以用property的方式取到。原因是，为了兼容Dom1之前的写法（有时又称之DOM0），于是将这几种常见的attribute的值同时保存为元素节点对象的property, 因此我们既可以通过attribue的写法var v=document.getElementById("title").getAttribute("id");来获取attribute的值，又可以通过property的写法来获取attribute的值，如var value=document.getElementById("title").id。

不知大家是否也明白了他们之间的区别，有什么问题，欢迎交流！