Property与attribute区别

最新推荐文章于 2024-01-10 14:21:47 发布

eynoZzzzc

最新推荐文章于 2024-01-10 14:21:47 发布

阅读量1.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： HTML+CSS+JavaScript 文章标签：前端 javascript

本文链接：https://blog.csdn.net/qq_44185558/article/details/123971239

HTML+CSS+JavaScript 专栏收录该内容

22 篇文章

订阅专栏

本文探讨了JavaScript中DOM对象的property和HTML标签的attribute之间的差异。property是对象的内在特性，如设置<div>元素的foo属性；而attribute是HTML标签上的元信息，如id、class和custom-attr。attribute的数据类型总是字符串，而property可以更丰富。文中通过生动的比喻解释了两者的概念，并举例说明了如何在JavaScript中操作DOM对象的属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在JavaScript中使用点运算符操作的DOM对象属性为property，在HTML标签上设置的属性叫做attribute；

<div id="test" class="button" custom-attr="1"></div>

以上id和class、custom-attr都叫做<div>标签的attribute；

document.getElementById('test').foo = 1; // set property: foo to a number: 1
document.getElementById('test').foo; // get property, return number: 1

以上设置DOM对象的property。

property最好翻译成特性，相对于对象本身来说，property是对象的组成部分；attribute翻译成属性，是一种对对象的说明；
比如人，生来有手有脚有眼睛等器官，称作property（先天的）；而向他人介绍某人时的一种描述，如名字、身高等叫做attribute（后天的）；
“桌子上有个苹果”。Attribute仅仅是描述了这个“有苹果”的事实，而Property则是直指那个桌子上的苹果。这里的苹果是一个实体，用Attribute来描述只能说明这个事件的事实。它无法准确的描述出具体是哪个苹果在桌子上；
还有一些HTML自带的属性，它们同时是Attribute和Property。Attribute的数据类型永远都是字符串，而Property就可以非常丰富。