前端杂谈: Attribute VS Property
第一个问题: 什么是 attribute & 什么是 property ?
attribute 是我们在 html 代码中经常看到的键值对, 例如:
<input id="the-input" type="text" value="Name:" />
上面代码中的 input 节点有三个 attribute:
- id : the-input
- type : text
- value : Name:
property 是 attribute 对应的 DOM 节点的 对象属性 (Object field), 例如:
HTMLInputElement.id === 'the-input' HTMLInputElement.type === 'text' HTMLInputElement.value === 'Name:'
第二个问题:
从上面的例子来看, 似乎 attribute 和 property 是相同的, 那么他们有什么区别呢?
让我们来看另一段代码:
<input id="the-input" type="typo" value="Name:" /> // 在页面加载后, 我们在这个input中输入 "Jack"
注意这段代码中的 type 属性, 我们给的值是 typo, 这并不属于 input 支持的 type 种类.
让我们来看看上面这个 input 节点的 attribute 和 property:
// attribute still remains the original value input.getAttribute('id') // the-input input.getAttribute('type') // typo input.getAttribute('value') // Name: // property is a different story input.id // the-input input.type // text input.value // Jack
可以看到, 在 attribute 中, 值仍然是 html 代码中的值. 而在 property 中, type 被自动修正为了 text, 而 value 随着用户改变 input 的输入, 也变更为了 Jack
这就是 attribute 和 Property 间的区别:
attribute 会始终保持 html 代码中的初始值, 而 Property 是有可能变化的.
其实, 我们从这两个单词的名称也能看出些端倪:
attribute 从语义上, 更倾向于不可变更的
而 property 从语义上更倾向于在其生命周期中是可变的
Attribute or Property 可以自定义吗?
先说结论: attribute 可以 property 不行
我们可以尝试在 html 中自定义 attribute:
<input value="customInput" customeAttr="custome attribute value" />
然后我们尝试获取自定义的属性:
input.getAttribute('customAttr') // custome attribute value input.customAttr // undefined
可以看到, 我们能够成功的获取自定义的 attribute, 但是无法获取 property.
其实不难理解, DOM 节点在初始化的时候会将html 规范中定义的 attribute 赋值到 property 上, 而自定义的 attribute 并不属于这个氛围内, 自然生成的 DOM 节点就没有这个 property.
一些补充
需要注意, 有一些特殊的 attribute, 它们对应的 Property 名称会发生改变, 比如:
- for (attr) => htmlFor (prop)
- class (attr) => className (prop)
(如果我们追到 DOM 的源码中, 应该是能列出一份清单的: 哪些 attribute 的名称会对应到哪些 Property, 感兴趣不妨试试)
关于 attribute 和 property 两者之间的差别, stackoverflow 上有一些很有意思的讨论:
https://stackoverflow.com/a/6377829/5033286
其中有些人认为 attribute 的值表示的是 defaultValue, 而 DOM 节点的 Property 则是另一回事. 比如: check (attr) 对应的是 defaultChecked (prop), value(attr) 对应的应该是 defaultValue (prop)
关于我们在 attribute 中 value 的限制 (如 input 的 type 有那些有效值), 可以参考这个链接:
https://www.w3.org/TR/html5/infrastructure.html#reflect
想了解更多 D3.js 和 数据可视化 ?
这里是我的 D3.js 、 数据可视化 的 github 地址, 欢迎 star & fork :tada:
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
《快学 Go 语言》第 1 课 —— Hello World
Go 语言的 Logo 最初 Go 语言的 Logo 是一只可爱的土拨鼠,土拨鼠昼伏夜出的习性让它显得很有 Geek 范。土拨鼠的行动其实并不敏捷,不过它繁殖能力很强,生长发育的很快。 到了 2018年,Go 语言重新制定了 Logo,消灭了土拨鼠,取而代之的是纯文字。这好像是在告诉用户 Go 语言不再是一个玩具语言,而是一个严肃的高效的正式语言。 不过这个新 Logo 不是很受欢迎,它虽然给人一种快速的感觉,但是也显得很极为古板。到目前为止,你在 Google 图片里搜索 Golang Logo,铺天盖地的还是土拨鼠的形象。 Go 语言的「元团队」 很多著名的计算机语言都是那么一两个人业余时间捣鼓出来的,但是 Go 语言是 Google 养着一帮团队打造出来的。这个团队非常豪华,它被称之为 Go Team,成员之一就有大名鼎鼎的 Unix 操作系统的创造者 Ken Thompson,C 语言就是他和已经过世的李奇一起发明的。 图片 图中翘着二郎腿的谢顶老头就是 Ken Thompson,它参与 Go 项目时个人已经处于半退休状态 —— 年纪大了。有条件的读者可以看看 Youtube ...
- 下一篇
《快学 Go 语言》第 2 课 —— 变量什么的最讨厌了
任何一门语言里面最基础的莫过于变量了。如果把内存比喻成一格一格整齐排列的储物箱,那么变量就是每个储物箱的标识,我们通过变量来访问计算机内存。没有变量的程序对于人类来说是可怕的,需要我们用数字位置来定位内存的格子,人类极不擅长这样的事。这就好比一岁半左右的幼儿还没有学会很多名词,只能用手来对物体指指点点来表达自己的喜好。变量让程序逻辑有了丰富的表达形式。 定义变量的三种方式 Go 语言的变量定义有多种形式,我们先看最繁琐的形式 package mainimport "fmt"func main() {var s int = 42 fmt.Println(s) } -------------42 注意到我们使用了 var 关键字,它就是用来显式定义变量的。还注意到在变量名称 s 后面声明了变量的类型为整形 int,然后再给它赋上了一个初值 42。上面的变量定义可以简化,将类型去掉,因为编译器会自动推导变量类型,效果也是一样的,如下 package mainimport "fmt"func main() {var s = 42 fmt.Println(s) } ---------------...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- CentOS7,8上快速安装Gitea,搭建Git服务器
- CentOS6,7,8上安装Nginx,支持https2.0的开启
- CentOS关闭SELinux安全模块
- SpringBoot2初体验,简单认识spring boot2并且搭建基础工程
- CentOS8编译安装MySQL8.0.19
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- CentOS8安装MyCat,轻松搞定数据库的读写分离、垂直分库、水平分库
- CentOS8安装Docker,最新的服务器搭配容器使用
- CentOS7,CentOS8安装Elasticsearch6.8.6
- Red5直播服务器,属于Java语言的直播服务器