码迷,mamicode.com
首页 > Web开发 > 详细

HTML的attribute和DOM的property剖析(转)

时间:2019-06-03 00:25:08      阅读:128      评论:0      收藏:0      [点我收藏+]

标签:启用   lse   extc   输入框   html   doc   形式   按钮   lock   

原文:https://www.jianshu.com/p/efc704d713c7

HTML attribute 与 DOM property 的对比

该文摘自angular的官方文档,老外对概念的解释还是很到位和容易理解的

attribute 是由 HTML 定义的。property 是由 DOM (Document Object Model) 定义的。

  • 少量 HTML attribute 和 property 之间有着 1:1 的映射,如id。
  • 有些 HTML attribute 没有对应的 property,如colspan。
  • 有些 DOM property 没有对应的 attribute,如textContent。
  • 大量 HTML attribute看起来映射到了property…… 但却不像我们想的那样!
  • 最后一类尤其让人困惑…… 除非我们能理解这个普遍原则:

attribute 初始化 DOM property,然后它们的任务就完成了。property 的值可以改变;attribute 的值不能改变。

例如,当浏览器渲染<input type="text" value="Bob">时,它将创建相应 DOM 节点, 其value property 被初始化为 “Bob”。

当用户在输入框中输入 “Sally” 时,DOM 元素的value property 变成了 “Sally”。 但是这个 HTML value attribute 保持不变。如果我们读取 input 元素的 attribute,就会发现确实没变: input.getAttribute(‘value‘) // 返回 "Bob"。

HTML attribute value指定了初始值;DOM value property 是当前值。

disabled attribute 是另一个古怪的例子。按钮的disabled property 是false,因为默认情况下按钮是可用的。 当我们添加disabled attribute 时,只要它出现了,按钮的disabled property 就初始化为true,于是按钮就被禁用了。

添加或删除disabled attribute会禁用或启用这个按钮。而与attribute 的值无关,这就是我们为什么没法通过 <button disabled="false">仍被禁用</button>这种写法来启用按钮。

设置按钮的disabled property(如,通过 Angular 绑定)可以禁用或启用这个按钮。 这就是 property 的价值。

就算名字相同,HTML attribute 和 DOM property 也不是同一样东西。

延伸

对于angular而言,这句话很重要,得再强调一次:

模板绑定是通过 property 和事件来工作的,而不是 attribute。

在 Angular 的世界中,attribute 唯一的作用是用来初始化元素和指令的状态。 当进行数据绑定时,只是在与元素和指令的 property 和事件打交道,而 attribute 就完全靠边站了。



作者:bluuus
链接:https://www.jianshu.com/p/efc704d713c7
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

HTML的attribute和DOM的property剖析(转)

标签:启用   lse   extc   输入框   html   doc   形式   按钮   lock   

原文地址:https://www.cnblogs.com/ajianbeyourself/p/10965162.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!