摘要:property 和 attribute非常容易混淆,两个单词的中文翻译也都非常相近(property:属性,attribute:特性),但实际上,二者是不同的东西,属于不同的范畴。希望阅读本篇文章以后大家有所收获,帮助大家对JavaScript的理解更加深入。
property 和 attribute非常容易混淆,两个单词的中文翻译也都非常相近(property:属性,attribute:特性),但实际上,二者是不同的东西,属于不同的范畴。
· property是DOM中的属性,是JavaScript里的对象;
· attribute是HTML标签上的特性,它的值只能够是字符串;
基于JavaScript分析property 和 attribute
html中有这样一段代码:
<input id="in_1" value="1" sth="whatever">
简单的在html页面上创建一个input输入栏(注意在这个标签中添加了一个DOM中不存在的属性“sth”),此时在JS执行如下语句
var in1 = document.getElementById('in_1');
执行语句
console.log(in1);
从console的打印结果,可以看到in1含有一个名为“attributes”的属性,它的类型是NamedNodeMap,同时还有“id”和“value”两个基本的属性,但没有“sth”这个自定义的属性。
attributes: NamedNodeMap value: "1"id: "in_1"
有些console可能不会打印in1上的属性,那么可以执行以下命令打印要观察的属性:
console.log(in1.id); // 'in_1'console.log(in1.value); // 1console.log(in1.sth); // undefined
可以发现,标签中的三个属性,只有“id”和“value”会在in1上创建,而“sth”不会被创建。这是由于,每一个DOM对象都会有它默认的基本属性,而在创建的时候,它只会创建这些基本属性,我们在TAG标签中自定义的属性是不会直接放到DOM中的。
我们做一个额外的测试,创建另一个input标签,并执行类似的操作:
html:
<input id="in_2">
JS:
var in2 = document.getElementById('in_2');console.log(in2);
从打印信息中可以看到:
id: "in_2"value: null
尽管我们没有在TAG中定义“value”,但由于它是DOM默认的基本属性,在DOM初始化的时候它照样会被创建。由此我们可以得出结论:
· DOM有其默认的基本属性,而这些属性就是所谓的“property”,无论如何,它们都会在初始化的时候再DOM对象上创建。
· 如果在TAG对这些属性进行赋值,那么这些值就会作为初始值赋给DOM的同名property。
现在回到第一个input(“#in_1”),我们就会问,“sth”去哪里了?别急,我们把attributes这个属性打印出来看看
console.log(in2);
上面有几个属性:
0: id1: value2: sthlength: 3__proto__: NamedNodeMap
原来“sth”被放到了attributes这个对象里面,这个对象按顺序记录了我们在TAG中定义的属性和属性的数量。此时,如果再将第二个input标签的attributes打印出来,就会发现只有一个“id”属性,“length”为1。
从这里就可以看出,attributes是属于property的一个子集,它保存了HTML标签上定义属性。如果再进一步探索attitudes中的每一个属性,会发现它们并不是简单的对象,它是一个Attr类型的对象,拥有NodeType、NodeName等属性。关于这一点,稍后再研究。注意,打印attribute属性不会直接得到对象的值,而是获取一个包含属性名和值的字符串,如:
console.log(in1.attibutes.sth); // 'sth="whatever"'
由此可以得出:
· HTML标签中定义的属性和值会保存该DOM对象的attributes属性里面;
· 这些attribute属性的JavaScript中的类型是Attr,而不仅仅是保存属性名和值这么简单;
那么,如果我们更改property和attribute的值会出现什么效果呢?执行如下语句:
in1.value = 'new value of prop'; console.log(in1.value); // 'new value of prop' console.log(in1.attributes.value); // 'value="1"'
此时,页面中的输入栏的值变成了“new value of prop”,而propety中的value也变成了新的值,但attributes却仍然是“1”。从这里可以推断,property和attribute的同名属性的值并不是双向绑定的。
如果反过来,设置attitudes中的值,效果会怎样呢?
in1.attributes.value.value = 'new value of attr'; console.log(in1.value); // 'new value of attr' console.log(in1.attributes.value); // 'new value of attr'
此时,页面中的输入栏得到更新,property中的value也发生了变化。此外,执行下面语句也会得到一样的结果
in1.attributes.value.nodeValue = 'new value of attr';
由此,可得出结论:
· property能够从attribute中得到同步;
· attribute不会同步property上的值;
· attribute和property之间的数据绑定是单向的,attribute->property;
· 更改property和attribute上的任意值,都会将更新反映到HTML页面中。
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号