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
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
HTML的attribute和DOM的property剖析(转)的更多相关文章
- 彻底区分html的attribute与dom的property
当初在学html时始终没有弄清楚的关于attribute与property的区别,竟然在看angular文档时弄明白了. angular官方文档的数据绑定一节提到html attribute与dom ...
- DOM 中 Property 和 Attribute 的区别
原文地址:http://web.jobbole.com/83129/ property 和 attribute非常容易混淆,两个单词的中文翻译也都非常相近(property:属性,attribute: ...
- [转]DOM 中 Property 和 Attribute 的区别
angular的文档: https://angular.io/guide/template-syntax#property-binding https://blog.csdn.net/sunq1982 ...
- HTML attribute 与 DOM property 的对比
HTML attribute vs. DOM property 要想理解 Angular 绑定如何工作,重点是搞清 HTML attribute 和 DOM property 之间的区别. attri ...
- DOM 中 Property 和 Attribute 的区别(转)
property 和 attribute非常容易混淆,两个单词的中文翻译也都非常相近(property:属性,attribute:特性),但实际上,二者是不同的东西,属于不同的范畴. property ...
- 区分元素特性attribute和对象属性property
× 目录 [1]定义 [2]共有 [3]例外[4]特殊[5]自定义[6]混淆[7]总结 前面的话 其实attribute和property两个单词,翻译出来都是属性,但是<javascript高 ...
- DOM中 property 和 attribute 详解
被问到 property 和 attribute 的区别,想来也是要好好看一下. 一.基本概念区别 其实Attribute和Property这两个单词,翻译出来都是“属性”,<js高级程序设计& ...
- Dom元素的Property和Attribute
Attribute就是DOM节点自带的属性,例如html中常用的id.class.title.align等: 而Property是这个DOM元素作为对象,其附加的内容,例如childNodes.fir ...
- DOM元素的Attribute(特性)和Property(属性) 【转载】
1.介绍: 上篇js便签笔记http://www.cnblogs.com/wangfupeng1988/p/3626300.html最后提到了dom元素的Attribute和Property,本文简单 ...
随机推荐
- EntityManager 的复杂查询
EntityManager 是用来对实体Bean 进行操作的辅助类.他可以用来产生/删除持久化的实体Bean,通过主键查找实体bean,也可以通过EJB3 QL 语言查找满足条件的实体Bean.实体B ...
- nc用法
NC 在客户端 和 服务器执行------------------------------------------------------------------------------------- ...
- node-gyp 在此解决方案中一次生成一个项目。若要启用并行生成,请添加“/m”开关。
在此解决方案中一次生成一个项目.若要启用并行生成,请添加“/m”开关. MSBUILD : error MSB3428: 未能加载 Visual C++ 组件“VCBuild.exe”.要解决此问题, ...
- Python3 if 变量variable SQL where 语句拼接
最近在写python3的项目,在实际中运用到了根据 if 判断变量variable ,然后去拼接where子句.但是在百度.BING搜索中未找到合适的答案,这是自己想出来的典型php写法,这里做一下记 ...
- AcWing 24. 机器人的运动范围
习题地址 https://www.acwing.com/solution/acwing/content/2970/ 题目描述地上有一个 m 行和 n 列的方格,横纵坐标范围分别是 0∼m−1 和 0∼ ...
- ABP 报错1
报错:.net core 2.2 HTTP Error 502.5 - ANCM Out-Of-Process Startup Failure 解决:安装.net core 2.2就解决了, 本地安装 ...
- pyhton2 and python3 生成随机数字、字母、符号字典(用于撞库测试/验证码等)
本文介绍Python3中String模块ascii_letters和digits方法,其中ascii_letters是生成所有字母,从a-z和A-Z,digits是生成所有数字0-9.string.p ...
- Kafka问题总结
kafka问题总结 kafka如何保证数据可靠性和数据一致性 Kafka Rebalance机制分析 Kafka的用途有哪些?使用场景如何? Kafka中的ISR.AR又代表什么?ISR的伸缩又指什么 ...
- vb.net 对字符串中的括号匹配进行判断,容许嵌套
' 括号检查 ' 括号共有四种: 1(英文圆括号),2(中文圆括号),3[方括号],4{花括号} ' 要左右匹配(可以嵌套) Private Shared Function i ...
- vue bootstrap中modal对话框不显示遮挡打不开
使用Vue bootstrap时,点击modal却不能弹出来,被隐藏遮挡无法显示,参考下面的这个博客的说明解决了这个问题: Heap Stack Blog(pingbook.top)Vue boots ...