一.概述
属性和性质是经常混淆的两个概念。
简单地说，在JS代码中访问属性:
document . getelementbytagname(' my-element '). prop 1 = ' hello '；
属性与此类似:
JS代码中访问属性的方法有getAttribute和setAttribute:
document . getelementbytagname(' my-element ')。setAttribute('attr1 '，' Hello ')；
document . getelementbytagname(' my-element ')。getAttribute('attr1 '，' Hello ')；
第二，区别
在大多数情况下，两者是等价的。在web标准中，通常规定一个属性“反映”一个同名的属性。但还是有很多例外。
1.名字不一致
最典型的是className。为了避免JavaScript保留字，JS中class属性对应的属性是className。
var div = document . getelementbytagname(' div ')；
div.className //cls1 cls2
2.不一致的类型
最典型的是style，不接受字符串赋值。
var div = document . getelementbytagname(' div ')；
Div.style //对象
3.语义不一致
比如元素a的href属性。
var a = document . getelementbytagname(' a ')；
A.href//"http://m.taobao.com",这个网址是解决的结果。
a . get attribute(' href ')////m . Taobao . com)与HTML代码中的一模一样。
4.单向同步关系
价值是一种极其特殊的属性/特性。
var input = document . getelementbytagname(' input ')；
//如果未设置属性，则结果为属性。
输入值//可爱
input . get attribute(“value”)；//可爱
input.value = ' hello
//如果已经设置了value属性，则属性保持不变，属性发生变化，对元素的实际影响是属性优先。
输入值//你好
input . get attribute(“value”)；//可爱
此外，checkbox的显示状态由两个属性确定，即checked和indeterminate，并且只有一个名为checked的属性。在这种情况下，property是更完美的访问模型。
第三，特殊场景
1 .突变
使用突变观察器，只能监视属性变化。
var observer = new mutation observer(函数(突变){
for(var I = 0；I <突变长度；i++) {
var突变=突变[I]；
console . log(mutation . attributename)；
}
});
observer.observe(element，{ attributes:true })；
Element.prop1 = 'aa' //不会触发。
Element.setattribute ('attr1 '，' aa ')//会触发。
2 .自定义元素
使用WebComponents时，可以定义attribute和property，它们可以相互反映，也可以完全不相关。
var MyElementProto = object . create(html element . prototype，{
createdCallback : {
值:函数(){ }
}
});
//定义属性
object . define property(my element proto，' prop1 '，{
get:function(){
return //
},
set:函数(){
console.log('属性更改')；//做点什么
}
});
//定义属性
myelementproto . attributechangedcallback = function(attr，oldVal，newVal) {
if(attr === 'attr1') {
console.log('属性更改')；//做点什么
}
};
窗户。my element = document . register element(' my-element '，{
原型:MyElementProto
});
本文是由"秘密武器开发者中心"本站原创整理，所有内容的版权归原作者所有。
