HTML的attribute和DOM的property剖析(转)
原文: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
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
最新文章
- JavaScript模板引擎artTemplate.js——引入子模板
- NOIP 考前DP 复习
- Linux服务器上安装织梦CMS
- 11.5---含有空字符串的字符串查找(CC150)
- java操作spark1.2.0
- ValueStack基础:OGNL
- 关于Web Api的HelpPage文档注释问题
- 软碟通UltraISO 9.65.3237官方注册版
- Android开源项目分享
- [安全学习环境]Win7 下DVWA安装指南
- 【转】搭建spark环境 单机版
- monkey日志管理
- selenium-xpath练习
- split-brain 脑裂问题(Keepalived)
- thinkphp中使用phpexecl多表格应用
- Android 添加网络权限
- 设计模式原则(1)--Single Responsibility Principle(SRP)--单一职责原则
- hdu 2586 How far away ?(LCA - Tarjan算法 离线 模板题)
- [Windows Azure] Guidelines for Connecting to Windows Azure SQL Database
- LeetCode 38 Count and Say(字符串规律输出)
热门文章
- IDEA安装(2019.2版)
- 利用shell脚本将Oracle服务器中数据定时增量刷新到ftp服务器中
- Nginx配置文件 nginx.conf 和default.conf 讲解
- atlas笔记
- Congigure SSL in StoreFront
- pandas 生成并排放置的条形图和箱线图
- 201871010126 王亚涛 《面向对象程序设计(java)》 第四周学习总结
- turtle模块
- Free Professional Resume Examples and Writing Tips
- VMware Workstation创建Windows2012server虚拟机