Attribute和Property的区别
时间:2022-07-24
本文章向大家介绍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); // text
console.log(document.querySelector("#this-input").getAttribute("type")); // t
console.log(document.querySelector("#another-input").customize); // undefined
console.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
- 键盘防抖
- 按键扫描接口的Verilog HDL 实现
- 病毒分析 | 一只“蜗牛”偷梁换柱,靠锁主页进行牟利
- 移位寄存器的工作原理
- ROM 单元
- 超前进位加法器
- 算法和数据结构—— 查找和排序
- CVE 2017-0199漏洞利用的新姿势
- Java 正则表达式 StackOverflowError 问题及其优化
- 权限后门系列之一:手动打造WordPress权限后门
- 浅谈用户行为分析之用户身份识别:cookie 知多少?
- 串口通信控制器的Verilog HDL实现(四) 接收模块的Verilog HDL 实现
- 串口通信控制器的Verilog HDL实现(三) 发送模块的Verilog HDL 实现
- 串口通信控制器的Verilog HDL实现(二) 波特率发生器模块
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法