感觉js部分应该没什么要介绍的了，所以打算这一篇介绍一些零碎的东西。
• DOCTYPE三种标准模式的写法
1.<!DOCTYPE html>
2.<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
3.<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
当还是XHTML的时候一般用第三种，但是现在我们一般直接用第一种写法就可以了，第一种是HTML5规范的标准写法。
• label标签
label标签的作用主要是用来绑定的，它里面有一个for属性。
通过for属性，里面写上要绑定的标签的id，就可以把这个label标签绑定到相对应的标签上了。
1.
2. <label for=“demo”>username:</label>
3. <input type=“text” id=“demo” />
现在我们点击username这个label标签，也可以触发input的聚焦事件，就好像这两个是一个东西一样，可以提高用户体验。
另外，我们如果在js代码中要表示label标签的for属性的话，要写htmlFor，而不能直接写for。
• 属性映射
这里的映射是指标签的行间属性（特性）和DOM对象的属性之间的映射关系。
1.
2. <div class=“demo” id=“only” data-log=“123” abc=“a”></div>
class和id属性是系统自带的，后两个属性是我们自己写的属性。
而我们获取出来的DOM对象div，可以通过div.className和div.id的方式来改写行间的属性值，但是却没法通过div.data-log或者div.abc来改写行间属性。
这是因为系统默认的属性之间是有一种映射关系的，我们可以直接修改DOM的属性来修改行间属性，但是对于我们自己设置的属性，就只能通过setAttribute和getAttribute来设置和获取了。
js引擎特殊赋予的映射关系有：class、id、style、value等属性。
• img图片预加载
其实图片预加载是一种思想，而不是一种代码方式。
1.
2. var count = 0,
3. img;
4. var timer = setInterval(function () {
5. count++;
6. if(count == 5) {
7. img = document.createElement(‘img’);
8. img.src=‘xxx’;
9. document.body.appendChild(img);
10. clearInterval(timer);
11. }
12. }, 1000);
如果我们加入的图片很大的话，展示出来的效果将是一点一点的往下加载，导致很久图片整体才会显现出来。因此，我们为了让图片显示出来的时候就是整体，只需要让图片的src提前下载，等到需要展示的时候直接加入进来就可以。
1.
2. var count = 0,
3. img = document.createElement(‘img’);
4. img.src=‘xxx’;
5. var timer = setInterval(function () {
6. count++;
7. if(count == 5) {
8. document.body.appendChild(img);
9. clearInterval(timer);
10. }
11. }, 1000);
但是凡事优化就会有利有弊，这种方式的弊端就在于前期会很占用网速。
• 模拟提取类名
1.
2. Document.prototype.getClassName = function (className) {
3. // 获取出来所有的元素
4. var allEle = document.getElementsByTagName(‘*’),
5. retArr = [];
6. // 遍历每一个元素
7. for (var i = 0, len = allEle.length; i < len; i++) {
8. // 把这个元素的所有类名都提取出来
9. var classNameArr = [];
10. if (allEle[i].className) {
11. classNameArr = allEle[i].className.split(‘ ‘);
12. // 去除掉类名数组中的空字符串
13. classNameArr = classNameArr.filter(function (value, key) {
14. return classNameArr[key];
15. });
16. }
17.
18. for (var j = 0, classlen = classNameArr.length; j < classlen; j++) {
19.
20. if(classNameArr[j] == className) {
21. retArr.push(allEle[i]);
22. break;
23. }
24. }
25.
26. }
27. return retArr;
28. }
getElementsByTagName(‘*’)的意思是把文档中所有的标签都选择出来的意思。
这样我们就可以模拟jQuery的类名提取方式了。
•文档碎片documentFragment
这个文档碎片就是我们前面提到过nodeType区分节点时候的属性值11的那个文档碎片节点。
文档碎片可以当做容器来进行效率的优化。
当我们动态生成很多元素然后加入到文档的时候，因为每一次添加页面都会重新重绘重排一次，效率非常低。
这个时候我们就可以把这些元素全部放到文档碎片里面，然后最后直接把整个文档碎片放进文档就可以了，这样页面只需要重绘重排一次即可。
1.
2. var fragment = document.createDocumentFragment();
3. var div = document.createElement(‘div’);
4. var span = document.createElement(‘span’);
5. var p = document.createElement(‘p’);
6. fragment.appendChild(div);
7. fragment.appendChild(span);
8. fragment.appendChild(p);
9. document.body.appendChild(fragment);
但是论时间添加事件的话，文档碎片的添加速度可能会比直接添加的速度要慢，这只是理论上可以节省添加时间，但是在其他方面确实存在优化效果。
