[js] 第19天 "attribute"和"property"有什么不同?
haizhilin2013 opened this issue · 16 comments
第19天 "attribute"和"property"有什么不同?
- property是DOM中的属性,是JavaScript里的对象
- attribute是HTML标签上的特性,它的值只能够是字符串
写源码的时候我们可以定义 attribute,然后浏览器编译后会生成对应的 DOM 对象,它会有 property
另外,attribute 的 name 大小写不敏感,而 property 的敏感
"attribute"和"property" 不知道是什么 你说的是 jQuery中的 attr 和 prop 么
每一个HTML标签都有默认属性,比如input标签,默认有value属性,id属性等,而这些属性就是property。而attribute是property的一个子集,是实际定义在HTML标签上的属性,这里也包括自定义的一些属性。
在操作 DOM 时,我们经常会操作 attribute
和 property
。不过从两者的所属关系上来说: property
属于 DOM Object,而 atrribute
属于 HTML。
property
通常比较容易获取,并且有固定的值(当然,类似 JavaScript 的对象,我们可以添加自定义的值,只是这些不会被 DOM 所认识)。比如 el.id
、el.value
、el.style
都是 property
而设置也只需要 el.id=newId
即可。attribute
的值不是固定的,我们可以自己为 DOM 添加需要的属性(以前常常用来存放数据或者标志位,在 HTML5 有了 data-*
的属性后,一般就利用 data-*
来存放数据了)。对于 attribute
的设定和获取我们使用 setAttribute
和 getAttribute
两个方法。
在书写方面 property
对于大小写敏感;而 attribute
对于大小写不敏感。
总的来看 property
的值更偏向于标准而 attribute
的值更偏向于自定义和非标准。
参考文章:
Attribute と Property
属性とプロパティ
property
-
是DOM中的属性,是JavaScript里的对象
-
可以读取标签自带属性,包括没有写出来的
-
不能读取attribute设置的属性
-
获取方式:读:element.property; 如:p.className;
-
设置方式:element.property = 'xxx'; 如:p.className = 'xiao';
-
是元素(对象)的属性
attribute
-
是HTML标签的属性,即直接在html标签添加的都是attribute属性
-
不能读取property设置的属性
-
读取方式:element.getAttribute('属性名','属性值'); 如:a.getAttribute('href');
-
设置方式:element.setAttribute('属性名','属性值'); 如:a.getAttribute('href','xiaowan.jpg');
-
直接在html标签上添加的和使用setAttribute添加的情况一致
来和我一起刷3+1吧
gitHub: https://github.com/Renato-Z/exercises/blob/master/history.md
attribute是标签的特性
- 跟直接在标签上是用如href、class、src等属性是一样的效果
- 通过setAttribute(设置)getAttribute(获取)来获取和设置值,element.setAttribute('href', 'xxx.html')
- 当attribute值在标签里改变时(不是用setAttribute时),getAttribute还是原来的值
property是DOM元素的属性
- 元素的属性,包括一些没有写出来的
- 直接通过属性名获取,element.id
- attribute是html中标签的特性
- property是js中的对象
取值与赋值
- attribute赋值只能是字符串
- attribute需要用getAttribute和setAttribute方法进行取值赋值
- property可以赋任何值
- property用“.”属性就可以取值和赋值
- 用property进行赋值后,用getAttribute的方式取到的是旧值
如
<input type="text" value="123"/>
用input.value = 456赋值之后,用input.getAttribute("value")获取到的仍然是123
但是用setAttribute赋值后,用property可以取到正确的值
property是DOM中的属性,是JavaScript里的对象
attribute是HTML标签上的特性,它的值只能够是字符串
attribute是html的所有属性的集合,包括自定义属性;
property属于dom对象,包括id,class。
两者都是properties的子集,而attribute可以影响property,反过来不行,
如
-
property
属于 DOM Object(JS原生对象的直接属性),而atrribute
属于 HTML(html标签的预定义和自定义属性) -
property 通常比较容易获取,并且有固定的值
类似 JavaScript 的对象,我们可以添加自定义的值,但DOM不会识别
比如 el.id、el.value、el.style 都是 property ,设置只需 el.id=newId
-
attribute 的值不是固定的,我们可以自己为 DOM 添加需要的属性
(以前常常用来存放数据或者标志位,在 HTML5 有了 data-* 的属性后,一般就利用 data-* 来存放数据了)
对于 attribute 的设定和获取我们使用 setAttribute 和 getAttribute 两个方法
-
在书写方面 property 对于大小写敏感;而 attribute 对于大小写不敏感
-
总的来看 property 的值更偏向于标准而 attribute 的值更偏向于自定义和非标准
property 和 attribute非常容易混淆,两个单词的中文翻译也都非常相近(property:属性,attribute:特性),但实际上,二者是不同的东西,属于不同的范畴。
property是DOM中的属性,是JavaScript里的对象;
attribute是HTML标签上的特性,它的值只能够是字符串;
attribute和property介绍
简单理解,Attribute就是dom节点自带的属性,例如html中常用的id、class、title、align等。
而Property是这个DOM元素作为对象,其附加的内容,例如childNodes、firstChild等。
总结:
property是dom对象的属性
attribute是html标签的属性
property可以获取和设置一些标签自带的属性,比如className、style、id、name、dataset等。
attribute可以通过property的attributes获取,但不能通过atrributes设置,也可以通过使用setAttribute和getAttribute获取和设置某个attribute。
property是dom对象的属性,例如 dom.id/dom.name/dom.firstChild
attribute是html标清的特性,它的值只能是字符串,可以通过getAttribute和setAttribute获取和设置某个attribute。
在 JavaScript 中,"attribute"(属性)和 "property"(属性)有一些不同之处。
属性(property)是对象的一个特征,用于描述对象的状态或特征。在 JavaScript 中,属性可以是对象自身的内部状态(内部属性),也可以是通过对象访问的外部状态(外部属性)。例如,对于一个 JavaScript 对象的属性,可以使用点符号或方括号来访问和设置其值。
例如,对于一个对象 person
,可以通过 person.name
或 person['name']
来访问和设置其 name
属性的值。
而属性(attribute)是 HTML 元素在 HTML 标记中定义的特性。在 HTML 中,元素可以具有各种属性,如 class
、 id
、 src
等。这些属性用于提供关于元素的附加信息,或者用于控制元素的行为和样式。
例如,在 HTML 中,可以通过 class
属性来定义一个元素的 CSS 类,或者使用 src
属性来指定图像或媒体的来源。
需要注意的是,JavaScript 中的属性和 HTML 中的属性之间存在一定的关联。在某些情况下,JavaScript 对象的属性可以对应于 HTML 元素的属性。例如,通过 JavaScript 操作 DOM 元素时,可以使用 element.getAttribute()
和 element.setAttribute()
方法来获取和设置 HTML 元素的属性值。
总结起来,属性(property)是 JavaScript 对象的特征,用于描述对象的状态或特征;而属性(attribute)是 HTML 元素在 HTML 标记中定义的特性,用于提供附加信息或控制元素的行为和样式。
attribute 是针对 HTML 元素的,property 是针对DOM 节点的。