1. childNodes和children属性

使用firstChild没有得到想要的结果, 用Chrome去调试发现firstChild竟然是文本元素, 然后又发现DOM节点有两属性childNodes和children, 于是学习记录下.

1.1. childNodes 属性

标准的，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本。可以通过nodeType来判断是哪种类型的节点，只有当nodeType==1时才是元素节点，2是属性节点，3是文本节点。有时候需要获取指定元素的第一个HTML子节点（非属性/文本节点），最容易想到的就是firstChild 属性。代码中第一个HTML节点前如果有换行，空格，那么firstChild返回的就不是你想要的了。
看到这我就明白为什么我的firstChild不对了，因为我在html节点前加了好几个 

1.2 children 属性

非标准的，它返回指定元素的子元素集合。经测试，它只返回HTML节点，甚至不返回文本节点。且在所有浏览器下表现惊人的一致。和childNodes 一样，在Firefox下不支持()取集合元素。需注意children在IE中包含注释节点。
于是用children[0]代替firstChild，得到想要的结果、

2. Javascript迭代Object

以为对象迭代只需要for(var item in object)即可取出object每个属性+值, 没想到这里的item只代表属性, 若需要得到值, 还需要object[item]
但是若使用Angular JS的ng-repeat且只使用一个参数 则其自动得到的是值而不是属性
若想得到key和value, 则(key,val) in data

若对浏览器打开某站点的每个tab页面都生成一个id并存储在cookie中, 可以使用SessionStorage
例如sessionStorage.setItem('id',Date.now().toString());
需要取出此id时, sessionStorage.getItem('id')

4. Canvas

使用HTML5的Canvas画图, 发现长度不对, 设置style的width为1000px感觉只是scale了一下
查阅文档发现Canvas作为特殊对象是存在width和height属性的, 应该设置该属性, 而不是style, 即
<canvas width="1000px"></canvas> 不使用 <canvas style="width:1000px"></canvas>
用jQuery的话则是$("#id").attr('width', 1000) 不是 $("#id").css('width',1000)

5. font-size

一直以为font-size的30px表示显示的每个文字都是30px的宽和高, 最近发现font-size只决定高度, 宽度由字符集自己按照比例决定. 如果需要修改可以使用css的transform:scale(2.0,1.0)属性