前言
学习JavaScript，就必会学到DOM（文档对象模型），因为这时JavaScript的基础，这篇博客继续总结JavaScript的DOM。
内容
DOM:文档对象模型（Document Object Model）
以面向对象方式描述的文档模型
以一种独立于平台和语言的方式访问和修改一个文档的内容和结构
可以动态的显示或隐藏一个元素，改变他们的属性
DOM技术是的页面的交互性大大的增强
优缺点：
- DOM的优势主要表现在：易用性强，使用DOM时，将把所有的XML文档信息都存于内存中，并且遍历简单，支持XPath，增强了易用性。
- DOM的缺点主要表现在：效率低，解析速度慢，内存占用量过高，对于大文件来说几乎不可能使用。另外效率低还表现在大量的消耗时间，因为使用DOM进行解析时，将为文档的每个element、attribute、processing-instruction和comment都创建一个对象，这样在DOM机制中所运用的大量对象的创建和销毁无疑会影响其效率。
BOM：浏览器对象
用于描述对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构
主要功能：
- 弹出新浏览器窗口的能力；
- 移动、关闭和更改浏览器窗口大小的能力；
- 可提供WEB浏览器详细信息的导航对象；
- 可提供浏览器载入页面详细信息的本地对象；
- 可提供用户屏幕分辨率详细信息的屏幕对象；
- 支持Cookies；
- Internet Explorer对BOM进行扩展以包括ActiveX对象类，可以通过JavaScript来实现ActiveX对象。
数组
concat/concatenation 连接/
语法：
Array <array>.concat(item1, item2, ..., itemN);
功能：
将数组与给定参数连接起来，参数也可以是数组
如果参数是数组，那么会将参数展开，但是不会展开数组中的数组
案例：
var arr = [1,2,3];
var arr2 = arr.concat("a","b",["d", "e"], [[4, 5], 6]);
// arr2: [1,2,3,a,b,d,e,[4,5],6];
for(var i in arr2) {
alert("key = " + i + ", value = " + arr2[i]);
}join
语法：
string <array>.join(separator);
功能：
将数组用指定字符进行连接，得到一个string
案例：
var arr = [1,2,"a","b"];
var res = arr.join("--");
alert(res);pop
语法：
元素 <array>.pop();
功能：
移除数组的最后一个元素，并返回该元素
如果数组为空，返回undefined
案例：
var arr = [1,2,3];
var ele = arr.pop();
alert(ele); // ele: 3
alert(arr); // arr: [1,2]push
语法：
number <array>.push(item1, item2, ..., itemN);
功能：
将元素追加到数组中，并返回数组的长度
如果元素是数组，不会像concat那样展开元素
案例：
var arr = [1,2,3];
var length = arr.push("a","b",["d", "e"], [[4, 5], 6]);
// arr: [1,2,3,a,b,[d,e],[[4,5],6]]
alert(typeof length);
alert(length);reverse
语法：
Array <array>.reverse();
功能：
将数组翻转，并返回数组引用. 注意，这里没有创建新数组
案例：
var arr1 = [1,2,3];
var arr2 = arr1.reverse();
// 此时arr1与arr2是同一个实例的两个引用shift
语法：
元素 <array>.shift();
功能：
移除数组的第一个元素，并返回
案例：
var arr = ["a", "b", "c", "d", "e", "d"];
var ele = arr.shift();
alert("arr的值为：" + arr + ", 类型为：" + (typeof arr)
+ ((arr instanceof Array) ? "是" : "不是") + "Array类型");
alert("ele = " + ele + ", " + typeof ele);slice
语法：
Array <array>.slice(start, end);
功能：
返回数组的片段，第二个参数如果省略表示一直到数组结束
案例：
var arr = [1,2,3,4];
var arr1 = arr.slice(0);
var arr2 = arr.slice(0, 2);sort
语法：
Array <array>.sort(sortFunction);
功能：
按照sortFunction的规则排序数组，并返回数组引用
如果省略sortFunction，那么按照字符是升序排列
sortFunction使用规范：
function(a,b) {return -1|0|1;};
-1a<b
0a=b
1a>b案例：
var arr1 = ["c", "a", "d", "b"];
arr1.sort();
var arr2 = [3,1,4,2];
arr2.sort(function(a,b){return a-b});splice
语法：
Array <array>.splice(start, deleteCount, item1, item2, ..., itemN);
功能：
将数组中从start开始，移除deleteCount个元素，并作为数组返回
如果有item等参数，将其插入到删除数据的位置处
案例：
var arr1 = [1,2,3,4,5,6];
var arr2 = arr1.splice(1, 2);
// arr1: [1,4,5,6]; arr2: [2,3];
// var arr2 = arr1.splice(1,2, "a", "b", "c", "d");
// arr1: [1,"a","b","c","d",4,5,6]; arr2: [2,3];
// var arr2 = arr1.splice(1,2, "a");
// arr1: [1,"a",4,5,6]; arr2: [2,3];unshift
语法：
number <array>.unshift(item1, item2, ..., itemN);
功能：
将元素加到数组的开始
案例：
var arr = [1,2,3];
var length = arr.unshift(11,12,13);
// arr: [11,12,13,1,2,3];数组排序
冒泡排序：
var mySort = function (arr, f){
for(var i=0;i<arr.length - 1;i++){
for(var j = 0; j<arr.length - 1 - I;j++){
if（f（arr [ j ] ,arr[j+1]）>0）{
var t = arr[j];
arr[j] = arr[j+1];
arr[j+1] = t;
}
}
}
}
mySort(arr,function(a,b){return a-b});//a-b为升序，b-a为降序操作样式：
onload = function () {
var p = document.getElementsByTagName("p")[0];
//css:background-color
//js:使用CamelCase命名规则，或者使用关联数组
p.style.backgroundColor = "pink";
//p.style.borderTopColor = "blue";
//p.style.borderTopStyle = "dashed";
//p.style.borderTopWidth = "1px";
p.style["border-top-color"] = "blue";
p.style["border-top-style"] = "dashed";
p.style["border-top-width"] = "1px";
}添加节点
节点的增删改查
查：
获取节点
改：
setAttribute/getAttribute
<节点>.属性 = …
<节点>.style.成员 = …
增：
创建元素节点：
var node = document.createElement("标签名")；
创建文本节点：
var textNode = document.createTextNode("文本");
<节点>.innerHTML = "文本"； //这里可以使用HTML
<node>.innerHTML
<节点>.innerText =“文本” //非标准
<node>.innerText创建属性节点：
<节点>.setAttribute(…,…);
//标准方法，符合xml规范，可以添加任意的属性
<a href = "…" jk ="jk">测试</a>
aNode.jk = "jk";//部分浏览器是可以的追加节点到尾部：
父结点.appendChild(子节点);
<parentNode>.appendChild(<subNode>)将节点插入到中间（插入到某一个元素的前面）：
父结点.insertBefore(新元素，旧元素);
<parentNode>.insertBefore(<newSubNode>,<nextNode>)删：
父结点.removeChild（子节点）；
<parentNode>.removeChild(<subNode>)eg.
onload = function(){
var body = J("body");
var p = J("p");
//body.removeChild(p);
p.style.display = "none";
};事件对象
使用事件对象的一般语法：
对象 = function（e）{/*方法*/};
常用成员
- 鼠标坐标
- screenX与screenY
- clientX与clientY
- layerX与layerY(当没有该属性的时候使用offsetX来表示div区域的坐标）
- 鼠标按键
- button
- 功能键
- altKey
- ctrlKey
- shiftKey
总结
颗粒归仓，及时回顾。
end
谢谢您的阅读！