JavaScript DOM 编程艺术
一、数据类型
1.字符串 - 转义字符
'don\'t ask; //输出don't ask;
2.js允许使用带任意位数小数的数值，即为浮点数。也支持负浮点数。
var a = -1.333333333;
3.数组
var a = ['john',1996,false];
var b = Array();
b[0] = a;
//b[0][0] 的值为 'john',b[0][2] 值为false。
4.对象 ：一组属性和方法的集合
方法1:
var a = Obiect();
a.name = "john";
a.year = 1996;
方法2：
var a = {name:"john",year:1996};
对象的实例化
内建对象和宿主对象
//内建对象：JS中预先定义好的对象
var a = new Array();
a.length; //数组元素的个数
//宿主对象：由运行环境（web环境中即指浏览器）提供的对象。
宿主对象包括Form、Image、Element等通过这些对象可以获得关于网页上关于表单、图像、元素等信息。
二、DOM树
1.节点
节点分为：
元素节点：标签元素
文本节点：包含文本的元素
属性节点：对元素做出更具体描述的属性
2.获取元素
1、getElementById 返回一个对象，即一个特定的元素节点
2、getElementByTagName 返回一个对象数组，对应一组特定元素节点
3、getElementByClassName 返回一个对象数组，对应一组特定元素节点
//每个元素（节点）都是一个对象
3、设置属性
1、getAttribute 获取属性，只能通过元素节点对象调用
2、setAttribute 设置属性，设置任意元素节点的任意属性
//通过setAttribute修改文档后，不会反映在文档本身的源代码里
DOM工作模式：先加载文档静态内容，再动态刷新，刷新不影响文档静态内容
三、JS图片库
1、childNodes 属性：
获取任何一个元素的所有子元素，返回包含全部子元素的数组。返回的节点，包含所有类型节点，包括符号空格等。
2、nodeType 属性：
共有12种，常用的有一下三种：
元素节点nodeType属性值: 1;
属性节点nodeType属性值: 2;
文本节点nodeType属性值：3；
3、nodeValue 属性：改变一个文本节点的值.
4、获取第一个子节点和最后一个子节点的方法：
a.firstChild = a.childNodes[0];
a.lastChild = a.childNodes[node.childNodes.length-1]
四、最佳实践
1、平稳退化：某些JS功能虽然无法使用，但基本的操作仍能顺利完成
javascript: 伪协议。真协议用来在Internet上传递数据包，如HTTP协议；伪协议让我们通过一个链接来调用js函数。
2、分离JS：就是把操作从HTML文档里分离出来， js分离时使用window.onload的必要性：
var a = document.getElementById("a");
这样的语句在js文件被加载执行时立即执行，但由于浏览器可能一次加载多个文件，不能保证执行时有了完整的DOM树，所以让这些代码在HTML文档全部加载还浏览器完毕时出发一个事件。此时document对象已经存在。
例：
window.onload = Fun;
function Fun () {
var a = document.getElementById("a");
}
3、对象检测：检测浏览器对js的支持程度
if(!document.getElementById) return false;
//如果不支持这个方法，返回错误。
4、性能考虑：
1）减少访问DOM，尽量减少标记
例：
var links = document.getElementById("a");
if(links.length > 0) {
for(var i = 0;i < links.length; i++){
}
}
//把搜索DOM结果保留在变量中，循环里重用该结果，降低搜索DOM次数
2）减少加载页面是发送的请求数量，如合并图标图片，合并js代码等。
3）压缩脚本
五、改进图片库
1、共享onload事件：addLoadEvent
//代码清单
function addLoadEvent(func) {
var oldonload = window.onload; //将window.onload函数的值存入变量
if(typeof window.onload != 'function') {
window.onload = func;
}
//如果这个处理函数未绑定任何函数，则将新函数添加给它
else {
window.onload = function() {
oldonload();
func();
}
//如果已经绑定函数，则把新函数追加到现有指令的末尾
}
}
addLoadEvent(FunAgain);
//直接使用此函数添加新函数
2、键盘访问： onekeypress(慎用)
js分离可以直接使用：
links[i].onekeypress = links[i].onclick;
//把onclick事件的所有功能赋给onekeypress
六、动态创建标记
1、document.write(“”):缺点是不能实现行为与表现分离原则，需要调用 2、innerHTML可写可查看
读：无细节，会将p元素下所有HTML代码都读出
p.innerHTML;
写：不区分插入和替换，所有原文本都会被覆盖
p.innerHTML = "NEW";
3、
creatElement:创建元素节点
creatTextNode:创建文本节点
appendChild:追加子节点
4、insertBefore(new,aim):在已有元素前插入新元素（兄弟元素）
var a = document.getElementById("a");
var p = document.creatElement("p");
a.parentNode.insertBefore(p,a);
//在id为a的元素节点前插入兄弟元素p
5、insertAfter(new,tar):在已有元素后面插入新元素
//代码清单
function insertAfter(newElement,targetElement) {
var parent = targetElement.parentNode;
if(parent.lastChild == targetElement) {
parent.appendChild(newElement);
}
else{
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
6、Ajax：对页面的请求以异步方式发送到服务器，服务器不会用整个页面响应请求，用户还能继续浏览。 XMLHttpRequest:使js可以自己发送请求，处理响应
七、充实文档内容
1、定义数组：
var defs = new Array();
defs[key] = definition;
//key作为下标，用definition作值，同事保存在defs数组里。
2、for/in
for(key in defs) {}
//for/in将某个数组的下表临时赋给一个变量
//将defs数组里的每个键的值赋给变量key，变量key可以向其他变量那样使用：
var definition = defs[key];
八、CSS-DOM
1、网页结构层-HTML 表示层-CSS 行为层-JAVASCRIPT
文档里每个元素都是一个对象，每个元素都有一个style属性，它们也是一个对象
2、DOM引用CSS属性时，要使用驼峰命名法，不能使用连接符，如font-family
局限性:只有内嵌样式的css属性才可以使用DOM查询。
3、使用DOM设置css样式：
p.style.font = "2px";
读：
p.className;
写：
p.className = value;
//新属性会替换原有属性
4、抽象：把一个具体的东西改进为一个通用的东西的过程。
九、用JS实现动画效果
1、
setTimeout("function",interval);
//function是要执行函数的名字，interval是数值，以毫秒为单位，指间隔时间
一般加你给函数调用赋值给一个变量：
movement = setTimeout("fun()",500);
//声明movement时未使用var，意味着函数行为可以在当前函数以外的地方被取消
clearTimeout(movement); //取消函数行为
2、
返回一个整数数值：
parseInt("39 steps");
返回一个浮点数数值：
parseFloat(string);
3、
Math.ceil(num); //将浮点数num向大于方向舍入为最接近整数
Math.floor(num); //将夫迪纳叔向小于方向舍入为整数
Math.round(num); //把任意浮点数舍入为与之最接近的整数
4、动画的定义：随时间变化而改变某个元素在浏览器窗口显示的位置。
5、js为元素创建属性：
element.foo = "bar"; //为element元素创建一个名为foo的属性并将他设置为bar。
