以下attribute均翻译为特性, property均翻译成属性, 后文会详细说明原因.
废话不多数, 先来看个JavaScript操作特性和属性的例子:
var btn = document.getElementById("btn");
btn.className = "btn"; //属性
btn.getAttribute("class"); //特性
以上两个语句都是在操作btn元素的class, 前者是属性. 后者是特性.
说到属性, 而且是点调用, 有没有想到JavaScript里的对象调用属性?
我们来看两个类比:
var obj = {
name: "TinyColder",
age: 22
};
alert(obj.name)//TinyColder
以上代码用点调用法, 调用了obj对象的name属性. 这就跟btn对象用点调用法调用className属性一样. 都是对象在调用自己所拥有的属性.
唯一的区别只是btn对象的属性是自动生成的而已
var btn = document.getElementById("btn");//从HTML获取元素节点对象.
btn.getAttribute("class"); //从HTML获取特性
以上两个语句, 都是通过DOM API获取HTML的对象或者特性. 操作的都是HTML的东西, 而上一个属性操作的, 却是JavaScript的东西.
所以我们可以总结出这么一个不那么准确的结论:
1. 属性是JavaScript的东西
2. 特性是HTML的东西
如果只说写到这里, 那这篇文章未必太水. 接下来才是文章真正的开始. 就让我们再进一步, 彻底揭开特性和属性之间的区别, 弄懂我们是为什么被特性和属性绕晕的.
我们知道, HTML中的每个元素, 都会映射到JavaScript中的一个DOM对象. 既然是个对象, 那么就肯定有其属性和方法.
而DOM对象生来就具有className, style等属性和setAttribute等方法. 而这些属性是怎么来的呢? 正好就是从HTML元素那里映射过来的.
这个时候, 歧义就出来啦, HTML有特性, JavaScript有属性, 关键是一个DOM对象的特性和属性名字基本都是一样的. 关键是无论属性和特性, 还是attribute和property.都是近义词.
这就让人在很混乱. 但是也有例外.
举三个典型的例子: id, class, disabled
id在JavaScript中是id, 一模一样
class在JavaScript中是className, 名字不一样
disabled在JavaScript中是disabled, 但是值却不一样.
在HTML中, disabled的值写的什么就是什么, 但是对于JavaScript来说, 这个属性的值是个boolean类型值, 只有true和false之分.
<input type="text" class="test-class" id="test-id" disabled="disabled">
<script type="text/javascript">
var btn = document.getElementById("test-id");
alert(btn.disabled);//true
alert(btn.getAttribute("disabled"));//disabled
</script>
吃个饭回来再写...
