attribute和property区别
-
非自定义属性的attribute,如id,class等都有对应的property。
-
自定义属性的attribute没有对应的property。
-
attribute不能从property中获得同步。
-
property能从attribute中获得同步。
-
更改property和attribute上的任意值,(除下列特殊情况)都会将更新反映到HTML页面中。
-
访问内置的HTML attributes,这些attribute不能从property同步过来。例如input标签的value 值。
-
class 为JavaScript的保留关键字,通过property操作class时应使用 className。
-
对于一些和路径相关的属性,两者取得值也不尽相同,但是同样attribute取得是字面量,property取得是计算后的完整路径。
-
attribute的checked、selected、disabled就是表示该属性初始状态的值。
-
property的checked、selected、disabled才表示该属性实时状态的值(值为true或false)。
-
对于值是true/false的property,attribute取得值是HTML文档字面量值,property是取得计算结果,property改变并不影响attribute字面量,但attribute改变会影响property计算。
node.getAttribute('someAttribute')和node.someAttribute的区别
node.getAttribute('someAttribute')获取的是attribute,而node.someAttribute获取的是元素的property
- node.property的方式不能获取自定义属性,node.getAttribute()的方式可以获取自定义属性。
- node. getAttribute()获取自定义属性忽略属性的大小写。
- node.getAttribute()获取自定义属性得到的值的类型总是字符串。
attr()和prop()的区别
-
attr()函数针对的是该文档节点的attribut,是HTML标签上的特性。
-
prop()函数针对的是DOM元素自身的property,是DOM中的属性。
-
attr()设置的属性值只能是字符串类型。
-
prop()设置的属性值可以为包括数组和对象在内的任意类型。
-
attr()函数主要依赖的是Element对象的getAttribute() 和setAttribute() 两个方法。
-
prop()函数主要依赖的则是JS中原生的对象属性获取和设置方式。
尽量使用prop()函数来设置或获取checked、selected、disabled等属性
能用prop(),就用prop()
参考文档: