前端杂谈: 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

D3-blog

如果觉得本文不错的话, 不妨点击下面的链接关注一下 : )

github 主页

知乎专栏

掘金

想直接联系我 ?

邮箱: ssthouse@163.com

微信:

前端杂谈: Attribute VS Property的更多相关文章

  1. javascript DOM 操作 attribute 和 property 的区别

    javascript DOM 操作 attribute 和 property 的区别 在做 URLRedirector 扩展时,注意到在使用 jquery 操作 checkbox 是否勾选时,用 at ...

  2. JavaScript的attribute和property辨析

    1.Attribute Attribute是HTML上设置的属性,在html中显式地设置,或者通过setAttribute()方法设置. <input type='text' id='txt' ...

  3. 必备技能:分清楚DOM的attribute和property

    分清楚DOM的attribute和property,用JQ的时候分清楚attr,和prop方法,网上有很多大神的总结,我就不列举了.

  4. jQuery的attr与prop,attribute和property区别

    jQuery1.6中新添加了一个prop方法,看起来和用起来都和attr方法一样,这两个方法有什么区别呢?这要从HTMl 的attribute与property区别说起,attr与prop正是这两个东 ...

  5. Attribute和Property

    有时很容易对Attribute和Property混淆,因为中文翻译都是“属性”来解释的.其实这两个表达的不是一个层面的东西. Property属于面向对象理论范畴,在使用面向对象思想编程的时候,常常需 ...

  6. javascript之attribute 和 property

    首先看看这两个单词的英文释义(来自有道词典).先是property: property ['prɔpəti] n. 性质,性能:财产:所有权 英英释义: any area set aside for ...

  7. attribute和property兼容性分析

    上一篇文章中,详细的分析了他们的区别,请看Javascript中的attribute和property分析 这次,来详细的看下他们的兼容性,这些内容主要来自于对于jQuery(1.9.x)源代码的分析 ...

  8. Javascript中的attribute和property分析

    attribute和property这两个单词,都有属性的意思,attribute有属性.特质的意思,property则有性质,性能的意思. 首先需要明确的是,在规范中,读取和设置attribute的 ...

  9. boolean attribute(布尔值属性) attribute vs property

    boolean attribute(布尔值属性) boolean attribute     HTML - Why boolean attributes do not have boolean val ...

随机推荐

  1. 不容错过的 Babel7 知识

    对 Babel 的配置项的作用不那么了解,是否会影响日常开发呢?老实说,大多情况下没有特别大的影响(毕竟有搜索引擎). 不过呢,还是想更进一步了解下,于是最近认真阅读了 Babel 的文档,外加不断编 ...

  2. Goland 开发插件安装

    goland 是一款非常优秀的开发工具,默认打开后,发白的开发界面,也是异常刺眼.但是 Goland 为我们准备了很多插件,要优先安装这些插件,打造适合自己的开发界面. 我自己的设置的主题界面如下: ...

  3. python基础知识(列表详解)

    列表(list) 列表中可以存入整数.实数.布尔值.字符串.序列.对象 可变序列 列表  []  元素间隔用   ,号分隔 列表的创建和删除 使用赋值运算符直接创建列表 listname = [元素1 ...

  4. 【POJ - 3009】Curling 2.0 (dfs+回溯)

    -->Curling 2.0 直接上中文 Descriptions: 今年的奥运会之后,在行星mm-21上冰壶越来越受欢迎.但是规则和我们的有点不同.这个游戏是在一个冰游戏板上玩的,上面有一个正 ...

  5. 【LeetCode】打家劫舍系列(I、II、III)

      打家劫舍(House Robber)是LeetCode上比较典型的一个题目,涉及三道题,主要解题思想是动态规划,将三道题依次记录如下: (一)打家劫舍 题目等级:198.House Robber( ...

  6. 【Linux开发】linux设备驱动归纳总结(五):1.在内核空间分配内存

    linux设备驱动归纳总结(五):1.在内核空间分配内存 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx ...

  7. c++ string详解 assign

    assign方法可以理解为先将原字符串清空,然后赋予新的值作替换. 返回类型为 string类型的引用.其常用的重载也有下列几种: a. string& assign ( const stri ...

  8. 第一次实验报告&学习总结

    实验报告一&学习总结 一.实验目的 熟悉JDK开发环境 熟练掌握结构化程序设计方法 二.实验内容 打印输出所有的“水仙花数”,所谓“水仙花数”是指一个3位数,其中各位数字立方和等于该数本身.例 ...

  9. MySQL Explain命令详解--表的读取顺序,数据读取操作的类型等

    表示索引中使用的字节数,可通过该列计算查询中使用的索引的长度(key_len显示的值为索引字段的最大可能长度,并非实际使用长度,即key_len是根据表定义计算而得,不是通过表内检索出的) 不损失精确 ...

  10. mysql架构总结

    1.单机架构模式,多用于测试,实际生产中需优化: 2.一主多从,主数据库读和写,从数据库从主数据库同步,仅负责读,可解决一定访问量的需求: 3.MHA(Master High Availability ...