一,'表亲戚':attribute 和 property
为什么称 attribute 和 property 为'表亲戚'呢? 因为他们既有共同处, 也有不同点.
attribute 是 dom 元素在文档中作为 html 标签拥有的属性; property 是 dom 元素在 js 中作为对象拥有的属性.
从定义上可以看出:
对于 html 的标准属性来说, attribute 和 property 是同步的, 是会自动更新的
但是对于自定义的属性来说, 他们是不同步的.(自定义属性不会自动添加到 property)
property 的值可以改变; attribute 的值不能改变
二,
分别打印两个值
打印 attribute 属性 直接把 div 标签当作对象, 用'.'输出即是 property 属性 但是注意! property 是不能输出自定义属性的
- //html
- <div class="divClass" id="divId"></div>
- //js
- window.onload = function(){
- var divId = document.getElementById('divId');
- console.log(divId.id);
- console.log(divId.add)
- }
可以看见 attributes 对应的值, 我们打印一下:
- console.log(divId.attributes[0]); // 打印 class="divClass"
- console.log(divId.attributes.class) // 打印 class="divClass"
- console.log(divId.getAttribute('class')) // 打印 divClass
- console.log(divId.getAttribute('id')) // 打印 divId
发现上面两组值是相等的.
虽然都可以取值, 但js 高级程序设计中提到, 为了方便操作, 建议大家用 setAttribute() 和 getAttribute() 来操作即可.
打印 property html 自带的 dom 属性会自动转换成 property, 但是自定义的属性没有这个'权利'
- <div class="divClass" id="divId" addUserDefine="zidingyi"></div>
- console.log(divId.class); // 打印 divClass
- console.log(divId.addUserDefine) // 打印 undefined
打开 Elements 的 properties 可以看到, dom 存在的属性, property 同样继承了, 而 addUserDefine 却没有出现在 property 中
- property:
- var obj = {};
- Object.defineProperty(obj,'name',{
- value:'Property'
- })
- console.log(obj.name) // 打印 Property
三, 用例子解析两者赋值
如果我们修改了 property 的值
- //html
- <input value="initValue" id="ipt"/>
- //js
- window.onload = function(){
- var ipt = document.getElementById('ipt');
- ipt.value = 'changeValue'
- console.log(ipt.value);
- console.log(ipt.getAttribute('value'));
- }
猜一下结果?? 答案是:
- console.log(ipt.value); //changeValue
- console.log(ipt.getAttribute('value')); //initValue
我们再来看看 input 的值
难以置信? 我们再来看看从修改 attribute 入手
- //html
- <input value="initValue" id="ipt"/>
- //js
- window.onload = function(){
- var ipt = document.getElementById('ipt');
- ipt.setAttribute('value','changeValue')
- console.log(ipt.value);
- console.log(ipt.getAttribute('value'));
- }
输出:
- console.log(ipt.value); //changeValue
- console.log(ipt.getAttribute('value')); //changeValue
总结如下:
property 比 attribute'霸道', 估计是'表哥'
property 和 attribute 两者是属于单方面通信, 即:
property 能够从 attribute 中得到同步;
attribute 不会同步 property 上的值;
再啰嗦一句: 对属性 Property 可以赋任何类型的值, 而对特性 Attribute 只能赋值字符串!
- //js
- var obj = {
- value : false,
- }
- var ipt = document.getElementById('ipt');
- obj.value = true; //property 更改
- ipt.setAttribute('value',true) //attribute 更改
- console.log(typeof obj.value); //boolean
- console.log(obj.value) //true
- console.log(typeof ipt.value) //string
- console.log(ipt.value); //true
来源: https://www.cnblogs.com/soyxiaobi/p/9581851.html