前端杂谈: Attribute VS Property

elina 发布于2019-08-02 11:59 / 2426人阅读

摘要：前端杂谈第一个问题什么是什么是是我们在代码中经常看到的键值对例如上面代码中的节点有三个是对应的节点的对象属性例如第二个问题从上面的例子来看似乎和是相同的那么他们有什么区别呢让我们来看另一段代码在页面加载后我们在这个中输入注意这段代码

前端杂谈: Attribute VS Property 第一个问题: 什么是 attribute & 什么是 property ?

attribute 是我们在 html 代码中经常看到的键值对, 例如:

上面代码中的 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中输入 "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.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 attribute!value Property

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53255.html

JavaScript DOM 4 - 属性 attribute vs property

摘要：可以是字符串，布尔值得，对象，数字等。但是这样的后果是，这些元素也不是合法的文档了。 1: 获取网页元素的属性值 HTML里面的标签，都有一些属性（attribute），比方：这里的href, id和class都是这个元素的attribute。而在我们的HTMLElement里，定义了与之对应的属性(property)，通过引用它们，可以得到这些元素的attribute的价值，例如...

tangr206 2019-08-20 17:28 评论0 收藏0
傻傻的分也分不清楚的property和attribute

摘要：最近，一个小伙伴问了我一个问题和的区别当时我想了又想，很不好意思的说了我不知道，所以，抽了个事件好好的利用了一下度娘和总结了一下。最近，一个小伙伴问了我一个问题property和attribute的区别？当时我想了又想，很不好意思的说了我不知道，所以，抽了个事件好好的利用了一下‘度娘’和‘Google’总结了一下。度娘搜索到的有用信息知乎中的讨论csdn搜索的结果，Google发现的...

SimpleTriangle 2019-08-21 18:20 评论0 收藏0
jQuery 的 attr 与 prop 的区别

摘要：先提出问题对于这类值是的属性，用的或方法进行读取或设置值是有区别的。因此，如果你想知道文本框的当前值，则读取。的值并不会随着的状态而作出相应改变，而会。为对象设置值的安全做法避免内存泄漏是使用。参考翻译地址的与的区别先提出问题：对于 checked 这类值是 true/false 的属性，用 jQuery 的 attr 或 prop 方法进行读取或设置值是有区别的。在看 jQue...

kk_miles 2019-08-19 17:47 评论0 收藏0
详解 HTML attribute 和 DOM property

摘要：在大多数的文章中，一般被翻译为特性，被译为属性。但是，和并不总是一对一的关系。当修改特性时，属性也会更新但是修改属性后，特性却还是原值。修改特性属性也更新了修改属性特性没有更新非标准特性非标准特性并不会自动映射为属性。在大多数的文章中，attribute 一般被翻译为特性，property 被译为属性。结论把结论写在最前面，如果你全都懂，后面就不用看了。 HTML attri...

shiyang6017 2019-08-02 15:21 评论0 收藏0