Author | 王平安 |
---|---|
pingan8787@qq.com | |
博 客 | www.pingan8787.com |
微 信 | pingan8787 |
每日文章 | https://0x9.me/KMrv3 |
1、Attribute
Attribute
是HTML
上设置的属性,在HTML
中显式地设置,或者通过setAttribute()
方法设置。
1 | <input type='text' id='txt' a=b /> |
比如这样一段HTML
代码,实际上它有三个attribute
属性,我们可以打印出来看看:
1 | var a = document.getElementById('txt'); |
对于Attribute
而言,它有三个常用的方法setAttribute()
、getAttribute()
以及removeAttribute()
:
1 | var a = document.getElementById('txt'); |
对于用setAttribute()
和removeAttribute()
方法设置和删除的属性来说,会实时地反映在html
页面的代码上。Attribute
的属性值只能是字符串,属性键大小写不敏感,比如:
1 | <input type='text' id='txt' a=b A='c'/> |
可以打开控制台看看代码的html结构(A被自动隐去了)。
可以说,如果想要获取一个DOM元素的attribute
属性值,只要打开控制台看看该DOM标签的html
代码,任何时候attribute
值和html
标签内设置的属性值都是同步的。
2、Property
Property
则比Attribute
复杂一点。
DOM是JavaScrip
t里的对象,Property
是DOM中的属性,它的属性值主要通过点运算符来获取和改变。这个对象实现了很多属性(property
):’value
‘,’className
‘等,以及一些方法getAttribute
,setAttribute
等,它也可以和其他的JavaScript对象一样添加自定义的属性以及方法。property
的值可以是任何的数据类型,对大小写敏感,自定义的property
不会出现在html代码中,只存在js中。
还是示例代码,他的property属性值有哪些?
1 | <input type='text' id='txt' a=b /> |
我们在html页面的input元素中设置了a属性,但是在property
中却是访问不到的;相反我们没有在html页面中设置的title
,访问它却没有反映undefined
!
这是怎么回事?
因为所有的HTML元素都由HTMLElement
类型表示,HTMLElement
类型直接继承自Element
并添加了一些属性,每个HTML元素都有下面的这5个标准特性:id
,title
,lang
,dir
,className
(在DOM中以property
方式操作这几个特性会同步到html标签中)。
所以即使在html中没有指定id
、title
等,也会默认赋予一个空串,通过property属性(点操作符)可以访问。而除此之外在html中设置的其他属性是不能通过Property
访问到的(attribute
特有的属性)。
如果把DOM元素看成是一个普通的Object对象,那么property就是一个以名值对(name='value'
)的形式存放在Object中的属性。要添加和删除property
也简单多了,和普通的对象没啥分别:
1 | var a = document.getElementById('txt'); |
除了id
、title
等5个属性(property
)外(每个element元素都有),个别的元素还有特别的属性,比如input元素有name
,a元素有href
等等。
3、Attribute vs Property
既然说有些属性既能通过attribute
访问修改,也能通过property
,那么有什么值得注意的地方呢?
之所以attribute
和property
容易混倄在一起的原因是,很多attribute
节点还有一个相对应的property
属性,比如div元素的id
和class
既是attribute
,也有对应的property
(id和className),不管使用哪种方法都可以访问和修改,如果在TAG对这些属性进行赋值,那么这些值就会作为初始值赋给DOM的同名property。
- input元素的value
input元素的value
属性是一大坑爹处,看下面代码:
1 | var a = document.getElementById('txt'); |
用点操作符改变value
值,并不会更新attribute
的value
值;而相反用attribute
更新value
值,却会反映到property
上…坑吧,谁规定的!
- 表单元素
DOM元素一些默认常见的attribute
节点都有与之对应的property
属性,比较特殊的是一些值为Boolean类型
的property
,如一些表单元素。对于这些特殊的attribute
节点,只要存在该节点,对应的property
的值就为true
,如:
1 | <input type='radio' checked='checked' id='radio'> |
disabled类似。
- href
两者对于href
的获取也有不同之处,attribute
取到的是实际设置的值(相对路径),而property
取得的是绝对路径:
1 | <a href='a.html' id='web'> </a> |
4、总结
Attribute
属性在html
上设置,会反应在html
代码上,两者同步;而Property
属性则可以看做是DOM对象的键值对,用点操作符对它们进行操作。
实际编程中,基本上的DOM操作都是使用property
的点操作符。
只有两种情况不得不使用attribute
:
1.自定义HTML Attribute,因为它不能同步到DOM property上
2.访问内置的HTML标签的
Attribute
,这些attribute
不能从property
上同步过来,比如input标签
的value
值(可以用来检验input值是否变化)