chaihongjun.me

javascript中的attributes和properties(js特性和js属性)

直奔主题,在深入学习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的对象中。发现没有,这里和我们日常的说法有差异,一般我们都把它们叫做属性。但是,这里为了区分我们严格称之为特性。

javascript中的attributes和properties(js特性和js属性)

所以,下面来介绍什么是真正的properties(属性):

javascript中的attributes和properties(js特性和js属性)

可以看到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

知识共享许可协议本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。作者:柴宏俊»

相关推荐