一、全面操作DOM

1.DOM操作图解

2.JavaScript组成

2.1核心（ECMAScript）：描述了JS的语法和基本对象的定义规范

2.2文档对象模型（DOM）：处理网页内容的方法和接口。比如：页面结构的增删改查...

2.3浏览器对象模型（BOM）：与浏览器交互的方法和接口。比如：前进/后退、界面跳转、弹窗...

3.DOM（document object model）文档对象模型

DOM为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构；目的其实就是为了能让js操作html元素而制定的一个规范；DOM树的根统一为文档的根--document。

3.1document内置方法：

3.2节点：由结构图中我们可以看到，整个文档就是一个文档节点；其中每一个HTML标签都是一个元素节点；标签中的文字称为文字节点，标签的属性称为属性节点，一切皆是节点。

3.3节点的获取

3.4节点的访问：DOM的节点并不是孤立的，因此可以通过DOM节点之间的相对关系对它们进行访问。

父级 parentNode：当前元素的上一级，必须是亲爸爸，爷爷都不算。

兄弟节点

nextSibling 下一个兄弟的意思，在ie678里面是正常的；但是在谷歌、火狐等浏览器里面，默认的下一个兄弟是空格或者换行。

兼容性写法：var next = div.nextElementSibling || div.nextSibling;

注意：一定先写nextElementSibling，因为谷歌、火狐等是认识nextSibling，但是空格或换行是掉不出来元素的属性的，所以会报错。解决方案：优先执行nextElementSibling。

获取第一个节点和最后一个节点

获取所有孩子节点

注意：只能获取儿子辈的，不能获取孙子辈的

1.childNodes（W3C推荐使用）

nodetype检测元素节点类型

2.children（IE出品）

3.5DOM节点操作（重点）

需求：在页面的很多特效中，元素节点是动态生成的。最常见的比如：轮播图下面的小圆点，是根据图片的张数动态生成的。这时候，我们需要用js动态操作DOM节点：创建、添加、删除、克隆...

创建节点：document.createElement（“标签名”）

添加节点：添加节点就是把创建好的节点放到某个地方

1.appendChild（）：a.appendChild（b）；把b标签放到a标签的里面，并且是放到a标签的最后面

2.insertBefore（插入的节点，参照节点）；如果第二个参数为null则默认插入到后面，该参数不能省略。

删除节点

1.removeChild（）：a.removeChild（b）；删除a里面的孩子b节点

2.remove（）：a.remove（）；把a节点直接删除

克隆节点（cloneNode）：用于复制节点，接受一个布尔值参数；true表示深复制（复制节点及其所有子节点），false表示浅复制（复制节点本身，不复制子节点）。

3.6标签的属性

getAttribute（“属性”）

setAttribute（“属性”，“值”）

removeAttribute（“属性名”）

注意：以上写法在IE6，7中不被支持，要做兼容；demo.className = "one";

3.7cssText：可以更改多个属性设置

二、九宫格案例

1.九宫格算法分析

1.1利用控件的索引index计算出控件所在的行号和列号

1.2利用列号计算控件的x值

1.3利用列号计算控件的y值

三、内置对象Date

1.目前js中常用的内置对象

2.日期对象Date的基本使用

2.1声明日期函数：var date = new Date（）；

2.2date对象常用方法

获取日期和时间

四、定时器

1、什么是定时器

在网页中有很多效果都是自己运动的；setInterval每隔一段时间会自动触发重复执行某一个操作；基本语法结构：window.setInterval("执行的代码串"，间隔时间);

2.常见的使用形式

定时器的一个重要用途在于：它可以不断刷新某个区域！意味着：这个区域不在初始化中执行，而是通过定时器进行唤醒，并且是有时间可控的。

3.自定义时间：var endTime = new Date（“2017/03/18 17：30：00”）

日期换算：