attributes属于html中的属性 翻译为特性
properties属于DOM对象中的属性 翻译为属性
正常我们创建一个HTML元素时,浏览器会解析出这个对象和它拥有的一些属性
比如
<input type="text" value="name" />
这个input就有两个属性。
当我们通过DOM对象去获取属性,他们却不一定是简单的1对1的关系。
比如
<input id="the-input" type="text" value="Name:">
这个DOM节点有三个属性id,type,value.
1、id这个属性(properties)是映射的是html id的特性(attributes)。这个是不能改变和受限制的。是纯映射
2、type这个属性(properties)是映射的是html type的特性(attributes)。但这个不是纯映射关系
假设我们把设置为<input type='foo'>
theInput.getAttribute("type") //输出的是foo
theInput.type // 输出的是text
因为 type的属性是被限定在指定的值
3、相反的value这个属性(properties),不是映射到html 'value'特性(attributes)。而是映射input现在的value。会随着输入的值变化而变化
假设我们输入的值join
theInput.value // 输出 "John"
theInput.getAttribute('value') // 输出 "Name:"
如果你想知道 input的初始值是哪个。可以使用defaultValue这个属性。这个是与Value纯映射的