前端杂谈: Attribute VS Property
前端杂谈: 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/6...
其中有些人认为 attribute 的值表示的是 defaultValue, 而 DOM 节点的 Property 则是另一回事. 比如: check (attr) 对应的是 defaultChecked (prop), value(attr) 对应的应该是 defaultValue (prop)
关于我们在 attribute 中 value 的限制 (如 input 的 type 有那些有效值), 可以参考这个链接:
https://www.w3.org/TR/html5/i...
想了解更多 D3.js 和 数据可视化 ?
这里是我的 D3.js 、 数据可视化 的 github 地址, 欢迎 star & fork
如果觉得本文不错的话, 不妨点击下面的链接关注一下 : )
想直接联系我 ?
邮箱: ssthouse@163.com
微信:
前端杂谈: Attribute VS Property的更多相关文章
- javascript DOM 操作 attribute 和 property 的区别
javascript DOM 操作 attribute 和 property 的区别 在做 URLRedirector 扩展时,注意到在使用 jquery 操作 checkbox 是否勾选时,用 at ...
- JavaScript的attribute和property辨析
1.Attribute Attribute是HTML上设置的属性,在html中显式地设置,或者通过setAttribute()方法设置. <input type='text' id='txt' ...
- 必备技能:分清楚DOM的attribute和property
分清楚DOM的attribute和property,用JQ的时候分清楚attr,和prop方法,网上有很多大神的总结,我就不列举了.
- jQuery的attr与prop,attribute和property区别
jQuery1.6中新添加了一个prop方法,看起来和用起来都和attr方法一样,这两个方法有什么区别呢?这要从HTMl 的attribute与property区别说起,attr与prop正是这两个东 ...
- Attribute和Property
有时很容易对Attribute和Property混淆,因为中文翻译都是“属性”来解释的.其实这两个表达的不是一个层面的东西. Property属于面向对象理论范畴,在使用面向对象思想编程的时候,常常需 ...
- javascript之attribute 和 property
首先看看这两个单词的英文释义(来自有道词典).先是property: property ['prɔpəti] n. 性质,性能:财产:所有权 英英释义: any area set aside for ...
- attribute和property兼容性分析
上一篇文章中,详细的分析了他们的区别,请看Javascript中的attribute和property分析 这次,来详细的看下他们的兼容性,这些内容主要来自于对于jQuery(1.9.x)源代码的分析 ...
- Javascript中的attribute和property分析
attribute和property这两个单词,都有属性的意思,attribute有属性.特质的意思,property则有性质,性能的意思. 首先需要明确的是,在规范中,读取和设置attribute的 ...
- boolean attribute(布尔值属性) attribute vs property
boolean attribute(布尔值属性) boolean attribute HTML - Why boolean attributes do not have boolean val ...
随机推荐
- vscode 中sftp配置
简单记录一下,相对路径的设置不用“/”表明根目录等,直接写目录名字即可 { "name": "profile name", "prot ...
- 使用Zabbix进行IPMI监控
1. 安装IPMItool软件包 # yum -y install OpenIPMI OpenIPMI-devel ipmitoolfreeipmi 2. 配置Zabbix 服务器端配置z ...
- Leetcode之动态规划(DP)专题-62. 不同路径(Unique Paths)
Leetcode之动态规划(DP)专题-62. 不同路径(Unique Paths) 一个机器人位于一个 m x n 网格的左上角 (起始点在下图中标记为“Start” ). 机器人每次只能向下或者向 ...
- Leetcode之广度优先搜索(BFS)专题-127. 单词接龙(Word Ladder)
Leetcode之广度优先搜索(BFS)专题-127. 单词接龙(Word Ladder) BFS入门详解:Leetcode之广度优先搜索(BFS)专题-429. N叉树的层序遍历(N-ary Tre ...
- webdriervAPI(元素等待)
from selenium import webdriver from selenium.common.exceptions import NoSuchElementException driv ...
- (转) pip Fatal error in launcher: Unable to create process using
接上篇“Eclipse启动报错:JVM terminated. Exit code=2”,今天把Python的安装位置也从C盘剪切到了D盘, 然后修改了Path环境变量中对应的盘符:D:\Python ...
- CreateThread()使用实例
1.定义的全局变量 DWORD WINAPI ClientThread(LPVOID lpParam); struct ClientInfo { SOCKET sock; SOCKADDR_I ...
- 2019牛客暑期多校训练营(第三场)- F Planting Trees
题目链接:https://ac.nowcoder.com/acm/contest/883/F 题意:给定n×n的矩阵,求最大子矩阵使得子矩阵中最大值和最小值的差值<=M. 思路:先看数据大小,注 ...
- java 给不同成绩分等级
题目:利用条件运算符的嵌套来完成此题:学习成绩>=90分的同学用A表示,60-89分之间的用B表示,60分以下的用C表示. 程序分析:(a>b)?a:b这是条件运算符的基本例子. pack ...
- 【转帖】超能课堂(186) CPU中的那些指令集都有什么用?
超能课堂(186)CPU中的那些指令集都有什么用? https://www.expreview.com/68615.html 不明觉厉 开始的地方 第一大类:基础运算类x86.x86-64及EM64T ...