Updated @2017-08-06
公司前端同事闲聊，发现几乎所有前端开发的同事都是有过后端背景的，究其原因是没有学校会教授前端开发的知识，结果就是成长路径靠各自摸索，一些基础的知识很多前端都有所欠缺。相对更熟悉的《JavaScript权威指南》，这本《JavaScript高级程序设计》显然更应该被希望进阶的前端开发人员所阅读。自己也是在越多过程中翻过来加深了一些基础知识的理解。言归正传，这里补充一些对attributes的理解。
每个元素都有一个或多个attribute，这些attribute的用途是给出对应元素或者其内容的附加信息。
只有非自定义的attribute才会以property的形式被添加到DOM对象中，并通过DOM元素的property来访问。
个人觉得可以这么理解：attributes的结构可以当做一个物理结构，就是实实在在的存在于DOM树上的内容，可视；而properties则是数值化的DOM。所有针对attributes的改动，不一定能同步到properties，因为必须符合一一定的标准。
一个举例是，火箭燃料中填充了100L(attributes），刻度盘数据上也会增大100L，反之只是在火箭的冰箱中塞几瓶可口可乐，并给可乐取名为"燃料附加"，显然是不会真的导致刻度盘上的火箭燃料数值增大的。
attribute和property并非一定能对应上，比如获取一个DOM的class可以通过，dom.getAttribute("class") 和 dom.classList.value；比如获取一个DOM的style可以通过 dom.getAttribute("style")和dom.style，其中前者得到的结果为字符串,后者得到的结果为一个对象；比如设置DOM的style却仅可以通过dom.setAttribute("style", "font-size:12px;color:red;");来使样式设置生效。
曾经在面试中被问到了attr()和prop()的区别，稍加学习记录如下
1. attribute和property
attribute
一个网页就是一棵DOM树，DOM树由节点构成，节点分为三种：元素节点、文本节点、属性节点。所有的属性节点构成了一个属性的数组，我们以如下HTML代码为例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>attr() vs prop()</title>
</head>
<body>
<input type="text" value="Name:">
<input type="checkbox" checked="false">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</body>
</html>
我们在浏览器窗口的console中输出：
var inputs = document.getElementsByTagName('input')
var input = inputs[0];
input.attributes
得到的结果是：
NamedNodeMap {0: type, 1: value, length: 2, getNamedItem: function, setNamedItem: function, removeNamedItem: function, item: function…}
可以看到，这个节点对象里面有很多的属性，我们只设置了两个，其他的是继承自原型链上的。
property
所有节点都是对象，对象上的属性叫做property，我们可以简单通过遍历这个对象来查看他的properties，如下为在浏览器中执行的例子：
var input = inputs[0];
for(var key in input) {console.log(key);}
如下为输出的结果：
VM445:2 webkitEntries
VM445:2 incremental
VM445:2 webkitdirectory
VM445:2 selectionDirection
VM445:2 selectionEnd
VM445:2 selectionStart
VM445:2 labels
VM445:2 validationMessage
...
因为property输出太多了所以没有全部列出，但自己执行后仔细查找会发现，type和value两个属性也存在于properties中。
2. property和attribute使用上有什么区别？
通过上节我们看到prop来自节点对象自带的，它包含了很多property；而attr来自对象的attributes，是我们在元素节点上添加属性节点才会有的。
对于上例的文本框，我们可以通过property方式像这样input.value 或者 attribute方式像这样 input.getAttribute( "value" ) 来获得值，并且得到的结果都是 "Name:"。
当我们在页面中编辑文本框的值，再次在console中获取的时候发现input.value的值是更新后的值，而input.getAttribute的值仍旧是旧的。
因此差别就是： property记录的值会按照用户操作实时更新，而attribute记录的都是初始值。
3. prop()和attr()的区别？
根据 W3C forms specification, checked 属性是一个 boolean attribute, 因此checked property只能是true或者false（当勾选为true，未勾选或者未设置为false）：
- elem.checked // true (Boolean) 会随着勾选状态而改变
jQuery的prop()方法是和上面直接取property一样 ，因此：
- $( elem ).prop( "checked” ) //true (Boolean) 会随着勾选状态而改变
而拿attribute拿到的只是初始的值：
- elem.getAttribute( "checked" ) // "checked" (String) 记录初始状态, 值为"checked"或者任意你设置的值，不会随着勾选状态而改变
jQuery的attr()方法获的的结果也跟getAttribute是一致的：
- $('input[type="checkbox"]').attr( 'checked' ) // 同上一条
至于说jQuery的历史版本中，attr()的实现曾经会跟getAttribute不一致，比如返回结果是会随着勾选状态变化的字符串，或者返回结果是Boolean类型的值，知道即可因为现在的用法是一致的了~
参考来源： JavaScriptDom编程艺术, stackoverflow, jQuery API, JavaScript高级程序设计
网友评论