直奔主题,在深入学习javascript之前也许你没有刻意的去区分什么是javascript的attributes(特性)和properties(属性)。对于大多数人来说,其实就没关系过他们之间的区别和联系,似乎我们通常情况下遇到的都是属性。
在具体分析之前,直接上结论:
attributes仅仅是针对一般的HTML文档元素而言,也就是DOM元素节点自带的一些常用属性,比如id,class以及以data-前缀开头的自定义特性等等,而properties是针对将DOM元素看作节点对象时的一些附加内容,比如:firstChild,lastChild等等。即 properties for DOM Object,attributes for HTML Tag.
咱们来具体分析一下:
HTML文档元素针对的标签元素,所以attributes只是在这些标签元素上才有的,比如:
<div id="divid" class="divclass" title="divtitle">div</div>
这里div是一个标签元素,它的id,class和title根据上面的结论来说这些就是attributes(特性),这些特性保存在一个叫NamedNodeMap的对象中。发现没有,这里和我们日常的说法有差异,一般我们都把它们叫做属性。但是,这里为了区分我们严格称之为特性。
所以,下面来介绍什么是真正的properties(属性):
可以看到properties的内容更多,而且涵盖了attributes的内容。所以从范围上面来看properties是以node的视角来看的,它的属性的值可以是任何的类型
另外,自定义的特性只在JS中出现,不会影响HTML文档。
最后总结:
Attributes – is what's written in HTML.
Properties – is what's in DOM objects.
Attributes(特性) | Properties(属性) | |
类型 | 字符串 | 任意类型(布尔,字符串等) |
名称 | 不区分大小写 | 区分大小写 |
参考资料:
http://lucybain.com/blog/2014/attribute-vs-property/
http://joji.me/en-us/blog/html-attribute-vs-dom-property