博客
关于我
Attribute和Property的区别
阅读量:409 次
发布时间:2019-03-06

本文共 1733 字,大约阅读时间需要 5 分钟。

Attribute和Property的区别

attributeXML元素中的概念,用于描述XML标签的附加信息,即XML标签的属性,propertyJavaScript对象中的概念,用于描述JavaScript对象的成员,即JavaScript对象的属性。

描述

在描述HTML时需要为其设定一些属性值的键值对用以描述标签:

上述标签节点就定义了3attribute

id: this-inputtype: textvalue: test

而浏览器在解析这段HTML后,就会创建一个Element对象,该对象包括很多属性property例如idinnerHTMLouterHTML等等,而对于这个Js对象,其许多属性property都与这个节点元素具有相同或相似名称的attribute,但这不是一对一的关系。

  • 某些attribute存在与property1:1的映射,例如id属性。
  • 某些attribute存在与property1:1的映射但名称不同,例如class属性。
  • 某些attribute不存在与property的映射,例如自定义的customize属性。

实例

首先将<input>标签中的type进行更改:

此时用Js取得对象的attribute以及property

console.log(document.querySelector("#this-input").getAttribute("type")); // t // attributeconsole.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")); // testconsole.log(document.querySelector("#this-input").value); // tconsole.log(document.querySelector("#this-input").defaultValue); // test

可以看到attribute依旧保留了其原始值,而property获得了改变后的值,如果需要在property获得其原始值可以使用defaultValue属性。

如果在DOM节点自定义了某些attribute,其不一定会同步到property,同样在property定义的属性不一定会同步到attribute

console.log(document.querySelector("#another-input").customize); // undefinedconsole.log(document.querySelector("#another-input").getAttribute("customize")); // test

代码示例

    Attribute Property            

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

https://www.jianshu.com/p/8415edb391cehttps://juejin.im/post/5bea695ae51d45196e141f7fhttps://stackoverflow.com/questions/6003819/what-is-the-difference-between-properties-and-attributes-in-html/6377829#6377829

转载地址:http://lsckz.baihongyu.com/

你可能感兴趣的文章
Mysql启动失败解决过程
查看>>
MySQL启动失败:Can't start server: Bind on TCP/IP port
查看>>
mysql启动报错
查看>>
mysql启动报错The server quit without updating PID file几种解决办法
查看>>
MySQL命令行登陆,远程登陆MySQL
查看>>
mysql命令:set sql_log_bin=on/off
查看>>
mySQL和Hive的区别
查看>>
MySQL和Java数据类型对应
查看>>
mysql和oorcale日期区间查询【含左右区间问题】
查看>>
MySQL和SQL入门
查看>>
mysql在centos下用命令批量导入报错_Variable ‘character_set_client‘ can‘t be set to the value of ‘---linux工作笔记042
查看>>
Mysql在Linux运行时新增配置文件提示:World-wrirable config file ‘/etc/mysql/conf.d/my.cnf‘ is ignored 权限过高导致
查看>>
Mysql在Windows上离线安装与配置
查看>>
MySQL在渗透测试中的应用
查看>>
Mysql在离线安装时启动失败:mysql服务无法启动,服务没有报告任何错误
查看>>
Mysql在离线安装时提示:error: Found option without preceding group in config file
查看>>
MySQL基于SSL的主从复制
查看>>
Mysql基本操作
查看>>
mysql基本操作
查看>>
mysql基础
查看>>