Attribute和Property的区别
Attribute和Property的区别
attribute
是XML
元素中的概念,用于描述XML
标签的附加信息,即XML
标签的属性,property
是JavaScript
对象中的概念,用于描述JavaScript
对象的成员,即JavaScript
对象的属性。
描述
在描述HTML
时需要为其设定一些属性值的键值对用以描述标签:
<input id="this-input" type="text" value="test" />
上述标签节点就定义了3
个attribute
:
id: this-input
type: text
value: test
而浏览器在解析这段HTML
后,就会创建一个Element
对象,该对象包括很多属性property
例如id
、innerHTML
、outerHTML
等等,而对于这个Js
对象,其许多属性property
都与这个节点元素具有相同或相似名称的attribute
,但这不是一对一的关系。
- 某些
attribute
存在与property
的1:1
的映射,例如id
属性。 - 某些
attribute
存在与property
的1:1
的映射但名称不同,例如class
属性。 - 某些
attribute
不存在与property
的映射,例如自定义的customize
属性。
实例
首先将<input>
标签中的type
进行更改:
<input id="this-input" type="t" value="test" />
此时用Js
取得对象的attribute
以及property
:
console.log(document.querySelector("#this-input").getAttribute("type")); // t // attribute
console.log(document.querySelector("#this-input").type); // text // property
可以看到对于property
而言,其会自动修正不正确的值,而对于attribute
而言,其保留了关于DOM
节点元素原本的值,可以说attribute
从语义上, 更倾向于不可变更的值,而property
从语义上更倾向于在其生命周期中是可变的值。下面是一个同样的例子,当更改输入框中的test
值为其他值比如t
时,分别取得其attribute
以及property
:
console.log(document.querySelector("#this-input").getAttribute("value")); // test
console.log(document.querySelector("#this-input").value); // t
console.log(document.querySelector("#this-input").defaultValue); // test
可以看到attribute
依旧保留了其原始值,而property
获得了改变后的值,如果需要在property
获得其原始值可以使用defaultValue
属性。
如果在DOM
节点自定义了某些attribute
,其不一定会同步到property
,同样在property
定义的属性不一定会同步到attribute
。
<input id="another-input" type="type" customize="test" />
console.log(document.querySelector("#another-input").customize); // undefined
console.log(document.querySelector("#another-input").getAttribute("customize")); // test
代码示例
<!DOCTYPE html>
<html>
<head><title>Attribute Property</title>
</head>
<body><input id="this-input" type="t" value="test" /><input id="another-input" type="type" customize="test" /></body><script type="text/javascript">console.log(document.querySelector("#this-input").type); // textconsole.log(document.querySelector("#this-input").getAttribute("type")); // tconsole.log(document.querySelector("#another-input").customize); // undefinedconsole.log(document.querySelector("#another-input").getAttribute("customize")); // test</script>
</html>
每日一题
https://github.com/WindrunnerMax/EveryDay
参考
https://www.jianshu.com/p/8415edb391ce
https://juejin.im/post/5bea695ae51d45196e141f7f
https://stackoverflow.com/questions/6003819/what-is-the-difference-between-properties-and-attributes-in-html/6377829#6377829
Attribute和Property的区别相关推荐
- java中类图概念,程序员眼中的UML(4)--类图释疑之一,Attribute和Property之区别
程序员眼中的UML(4) --类图释疑之一,Attribute和Property之区别 上一篇中提出了很多问题,其中最令人费解的可能就是Attribute和Property之区别了吧.我在网络上寻找良 ...
- 属于attribute还是property。
在获取比较值的时候会用in来判断是否可以用[x]方式,其实是判断该属性是属于attribute还是property. 那attribute和property到底是什么呢,有什么区别呢?这个或许很多人都 ...
- 对于DOM的attribute和property的一些思考
2019独角兽企业重金招聘Python工程师标准>>> 前段时间,观看了WTP的一篇文章"DOM的attribute和property",觉得写的很好,感谢WTP ...
- JavaScript DOM 4 - 属性 attribute vs property
1: 获取网页元素的属性值 HTML里面的标签,都有一些属性(attribute),比方: <img src="http://www.abc.com/logo.png" cl ...
- 简述Field,Attribute,Property的区别
您要是关注我这个,说明您是行内人,那我就开门见山了,用代码来诠释吧 //Field protected string _Version; //Attribute [XmlElement("V ...
- [原]简述Field,Attribute,Property的区别
您要是关注我这个,说明您是行内人,那我就开门见山了,用代码来诠释吧 //Field protected string _Version; //Attribute [XmlElement("V ...
- java中的variable是什么,Java POJO中的field,variable,attribute和property有什么区别?
从这里: http : //docs.oracle.com/javase/tutorial/information/glossary.html 领域 一个类的数据成员. 除非另外指定,否则字段不是静态 ...
- Attribute 和 Parameter 的区别
(1)HttpServletRequest类有setAttribute()方法,而没有setParameter()方法 (2)当两个Web组件之间为链接关系时,被链接的组件通过getParameter ...
- JavaScript 中 Property 和 Attribute 的区别
转自:http://www.cnblogs.com/elcarim5efil/p/4698980.html property 和 attribute非常容易混淆,两个单词的中文翻译也都非常相近(pro ...
最新文章
- 墨奇科技汤林鹏:如何用 AI 技术颠覆指纹识别?
- 遇到一个由于事务控制不当造成错误的Bug
- spark rdd saveAsTextFile保存为文件
- 中澜视讯产品运营总监黄超强:产品+付费+未来汽车
- Leetcode300. Longest Increasing Subsequence最长上升子序列
- 数据智能构建管理平台Dataphin V2.9.4.3版本发布
- Linux 环境下安装 Golang
- Python API快餐教程(1) - 字符串查找API
- SpringMvc渲染视图
- iOS buttonWithType:101 苹果私有api
- react初识生命周期
- Unix 电子书大全
- 网站点赞 评论 回复 数据库设计
- 微信小程序云函数使用讲解
- 删除win10添加的网络位置
- Spring Cloud 入门到进阶 - 01 Eureka 服务实例的健康自检 (下)
- numeric比较大小 数据库_SQL中NUMERIC和DECIMAL的区别
- 2022年交通工具公开拍卖市场研究报告
- 高中计算机专业教师 教学计划,信息技术教师教学计划
- 斗圣传说找不到服务器,斗圣传说三界幻境攻略_斗圣传说三界幻境怎么玩_游戏堡...