JS基础知识（三）——BOM,DOM

w3c规则，ie的盒模型

一、闭包

函数可以访问向上函数作用域的变量

二、BOM-浏览器对象模型

1. 将HTML构建成一个DOM树，DOM树的构建过程是一个深度遍历的过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。
2. 将CSS解析成CSS去构造CSSOM(CSS Object Model,CSS对象模型)树。
3. 根据DOM树和CSSOM来构造Rendering Tree（渲染树）。

注意：Rendering Tree渲染树并不等同于DOM树，因为一些像Hender或display：none的东西就没必要放在渲染树中了。

（一）BOM内的Window对象

• screenLeft（属性）：屏幕左边，返回窗口相对于屏幕的x坐标
• screenTop：返回窗口相对于屏幕的y坐标
• screenX(IE)
• screenY(IE)
• alert：出现警告
  alert("警告内容");--加引号
• prompt：可输入内容的对话框
  prompt("框上说明"（可无）);
• confirm：取消一个对话框
• setTimeout，setInterval(时间单位为毫秒)
  setTimeout：一段时间后执行所给函数
  setTimeout ( functionname / function ( ) { 函数体 } , 多少毫秒后执行 )
  setInterval：每隔一段时间执行所给函数
• clearTimeout，clearInterval：删除定时器
  var time=setTimeout（ , ）；clearTimeout（time）；

（二）Location对象

• hash属性：设置或返回从井号 (#) 开始的 URL（锚）。
• host属性：设置或返回主机名和当前 URL 的端口号。
• href属性：设置或返回完整的 URL。
• port属性：设置或返回当前 URL 的端口号。
• assign方法：加载新的文档

三、DOM-文档对象模型（->HTML)

document object model

• 独立于平台和语言的接口（不仅在js可用）
• 通过他与文档进行连接
• 运行程序和脚本动态的访问和更新
• 节点：任一内容均可成为节点：元素节点，文本节点，属性节点，注释节点……
  可以将一个HTML文档转变成一个DOM树
  （元素节点不包括文本节点）

（一）节点访问

DOM节点关系

• childNodes：子节点的集合/数组

var oItems = document.body.childNodes;
for(var i;i<oItems;i++)
{
    console.log("nodeType:"+oItem[i].nodeType);
    console.log("nodeName:"+oItem[i].nodeName);
    console.log("nodeValue:"+oItem[i].nodeValue);
}

• parentNode：返回父节点
• firstChild，lastChild：第一个，最后一个子节点
• nextSibling，previousSibling：下/前一个同胞节点
• NodeList：返回一个节点组
  动态的属性（对文档结构的修改，会实时反射到NodeList）

（二）节点操作

• 创建节点
  createElement(); //创建元素节点
createTextNode(); //创建文本节点
createComment(); //创建文本节点
  文档碎片
• appendChild：在很多个子节点最后再插入一个新的节点
• insertBefore：在指定节点之前插入一个新的节点
  insertBefore( 新节点 , 以前的节点 );
• replaceChild：替换已存在的节点
• removeChild：移除存在的节点
• document：一般用document.来访问节点

获取节点的方式

常用
getElementById();
getElementsByTagName(); //标签名
getElementsByClassName();
getElementsByName();
不常用
querySelector('选择器');
querySelectorAll('选择器'); //获取...里全部的…

（三）attribute属性操作

getAttribute("属性名"); //返回属性的值
getAttribute("属性名")[0]; 返回…的第一个值
setAttribute("属性名","属性值"); //添加属性；若属性名已存在，对其进行修改
removeAttribute("属性名"); //删除属性

（四）文本操作

• write(方法)：重绘整个页面
• innerHTML(属性)->常用
  document.getElementById("id").innerHTML= ··· ;
//得到标签名为“id"的内容/修改从元素的标签开始所有内容
  重绘页面的一部分
• innerText：只返回标签内部的内容；按行输出，不会用到HTML内的格式
• textContent：包括下面的子节点的所有内容；输出格式与HTML内的格式 一致

（五）文档碎片

document.createDocumentFragment();
相当于创建一个容器，将节点放进去可以防止节点之间插入节点树上浏览器进行渲染，提高性能

var fragment = document.createDocumentFragment()
for (var i = 0 ; i<1000 ; i++)
{
    var x = document.createElement("span");
    var t=document.createTextNode("i");
    x.appendChild(t);
    fragment.appendChild(x);
}
document.body.appendChild(fragment);

（六）元素遍历

• childElementCount：返回元素子节点的个数
• nextElementChild：返回第下一个元素节点（可以跳过换行的空）
• firstElementChild
• lastElementChild
• previousElementChild

（七）访问样式

element.style.color=“red”；
style的属性要用驼峰式命名

（八）计算的样式

element.style.无法访问外联样式表里的样式
document.defaultView.getComputedStyle(DOM元素，伪类/null)

（九）DOM事件

事件流

1. 捕获过程：x标签被点击，由window-document-< html >-< body >-< div >-< x.father标签 >
2. 冒泡过程：由该标签的父元素向上
3. 触发过程：点击x标签

一定会有触发过程，捕获和冒泡有一种

事件处理

（eg.click事件，mouseover事件；响应，处理事件的函数）

• on(html)：<…… “函数/函数名（函数体放js里）”>
• on(js)

DOM零级事件处理程序

• 定义对象获取某一节点，节点.onxxx=function{……}；
• 删除一个事件 id.onxxx=null；
• 对同一元素多次处理，只执行最后一次的fun，执行最后一次的内容

DOM二级事件处理程序

• addEventListener：添加事件监听（可以多次添加）
  变量.addEventListener(事件名，事件处理函数，布尔值);
//布尔值默认-false-事件在冒泡阶段执行
• removeEventListener：删除事件监听
  变量.removeEventListener（事件名，函数名，布尔值）;
//布尔值默认-false-在冒泡阶段移除
  匿名函数不能通过该函数删除（方法：添加个事件名)

event（事件对象）

可以运用对象的属性和方法

• target：返回触发事件的节点
• preventDefault：阻止默认行为（eg.双击全选）
• currentTarget：返回绑定事件的元素节点（过程中相关的所有节点）
• stopPropagation：阻止事件的冒泡传播
• type：返回发生事件的名称

鼠标事件

• click：< element onclick = "code" > x.function（）{……}
• dbclick ：双击
• mousedown：按下鼠标
• mouseup ：释放鼠标
• mousemove ：在元素内部移动
• mouseleave：移动到元素外部，子元素不触发
• mouseout：移动在元素外部 子元素触发
• mouseover：移入元素 子元素触发
• mouseenter ：移入元素 子元素不触发

mousedown>move>up>>click
mousemove>over>enter>move>out>leave

鼠标的event

• pageX，pageY：点击位置相对于整个页面的x，y坐标
• clientX，clientY：点击位置对于浏览器可视窗口的x，y坐标
• screenX,screenY：点击位置相对于电脑屏幕的x，y坐标
• offsetX,offsetY：点击位置相对于复盒的x，y坐标

键盘事件

使用时：onkeyxxx

• keydown
• keypress
• keyup
• keyCode：获取按键（onkeydown，onkeyup）的Unicode值
• charCode：返回onkeypress的值的Unicode值

事件委托

通过给目标节点的父节点添加事件，然后判断event.target是不是子节点，如果是就执行函数

• 可以减少代码的冗余