目录

一、回顾与加强

1、JavaScript错误类型及特点

1、编译类型的错误

编译错误就是语法错误。

2、执行错误

语法上没有错误，结合上下午出现的错误，比如调用了一个不存在的变量或函数等。

2、事件

1、事件驱动式

事件驱动式由：用户的行为+JavaScript引擎捕获用户的行为+调用处理函数。实际上就是一个事件的组成。

2、事件处理函数的绑定与执行

①、行内绑定

在HTML标签内指定事件并写处理程序。

②、行内绑定—动态绑定

如果事件的处理程序又大段的js代码，那么直接写到行内，肯定是不合理的，解决的办法是将大段的js代码封装成函数，然后触发事件的时候，调用这个函数。

③、动态绑定

通过获取元素（标签、节点）的dom对象，然后给dom对象绑定事件的方式来实现事件的绑定。

3、在事件处理程序中，this分别表示什么

①、行内绑定

②、行内绑定—动态执行

③、动态绑定

二、闭包

1、概念

闭包，指的是词法表示包括不被计算的变量的函数，也就是说，函数可以使用函数之外定义的变量。

2、特点（作用）

1、和作用域的特定一致

可以在函数内部使用函数外部的变量。

2、使用闭包，内存不会释放

3、案例

1、点击页面中的三个li标签，能够正常输出li的下标

上面案例的另一种写法：

2、页面刷新后，每隔1秒分别输出1/2/3/4/5

三、DOM

1、什么是DOM

DOM全称是Document Object Model（文档对象模型），它是JS将HTML按文档结构和内容层次抽象出的模型，使得JS有了访问HTML的能力，能够实现对HTML中内容的操作。DOM存在广泛，PHP以及其他语言也有各自的DOM模型。

DOM模型呈现树状结构，因此也叫“树模型”，树中的内容（标签、属性、文本）称为“节点”，包含有元素节点（标签）、属性节点、文本节点。每个节点，都是一个dom节点对象。

2、节点与DOM模型

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

整个文档是一个文档节点，用document对象表示

每个 HTML 元素是元素节点，比如html、head、body、a、h1

HTML 元素内的文本是文本节点

每个 HTML 属性是属性节点，比如href

注释是注释节点

3、节点之间的关系

4、元素节点查询操作

1、基于文档（document）查询

document.getElementById(元素id); //得到一个dom对象

document.getElementsByTagName(标签名); //得到的是一个数组，数组的每个单元是一个dom对象

前面这两种方法推荐使用，因为兼容性好。

document.getElementsByClassName(类名); //IE8+支持，就是从IE9支持 得到的是一个数组，数组的每个单元是一个dom对象

document.getElementsByName(元素的name属性); //得到的是一个数组

//h5中提供的方法

document.querySelector(css选择器); //IE7+支持 得到的是一个dom对象

document.querySelectorAll(css选择器); //IE7+支持 得到的是一个数组

测试的html：

js代码及效果：

2、相互关系查询

①、根据父节点查找子节点

②、根据子节点查父节点

③、查询兄弟节点

3、遗留DOM

早期DOM访问形式，在一些特定元素的获取上比较方便。被保留下来使用，W3C标准化之后 称为“0级DOM”。

document.body 访问body节点

document.forms 访问所有的表单 返回集合

document.formName[index].name 访问表单项

document.anchors 访问所有的锚点 返回集合

document.links 访问所有的链接 返回集合

document.images 访问所有的图片 返回集合

document.all 访问所有的元素

5、元素节点增删改操作

1、增加元素节点/创建节点

方法一：父节点.appendChild(子节点)

方法二：父节点.insertBefore(新节点, 参照的节点);

2、修改节点

方法：父节点.replaceChild(新节点, 待替换的节点);

3、删除节点

方法：父节点.removeChild(子节点);

6、属性节点操作

1、获取元素的属性

elementNode.attributes 获取元素的所有属性

elementNode.getAttribute() 读取一个属性值

elementNode.属性名 获取元素的属性

2、添加/修改元素的属性

elementNode.setAttribute() 设置（修改/添加）一个属性值

elementNode.属性名 = 值 设置元素的属性

3、删除元素的属性

elementNode.removeAttribute() 删除一个属性

4、判断元素是否有哪个属性

elementNode.hasAttribute() 检测是否有某个属性，有返回true，没有返回false

5、案例—全选，反选，取消

代码见19全选反选取消.html

7、操作css样式

1、设置css样式：

语法： node.style.css样式 = 值

不带中横线的css：node.style.样式 = 值。比如有color，border，width

带中横线的，样式要去掉中横线，后面的首字母大写，backgroundColor、fontSize、lineHeight

2、获取css样式

使用node.style.样式的方式只能获取行内样式和js已经设置过的样式。

在IE8及更低版本浏览器中支持node.currentStyle.样式

高版本浏览器支持getComputedStyle(node).样式

兼容的性的写法：

8、DOM属性

DOM有四个属性，分别是：

innerHTML

获取/设置元素里的html内容

nodeName

nodeName 是只读的

元素节点的 nodeName 与标签名相同

属性节点的 nodeName 与属性名相同

文本节点的 nodeName 始终是 #text

文档节点的 nodeName 始终是 #document

nodeValue

元素节点的 nodeValue 是 undefined 或 null

文本节点的 nodeValue 是文本本身

属性节点的 nodeValue 是属性值

nodeType

表示节点的类型

元素 1

属性 2

文本 3

注释 8

文档 9

案例：完成兼容性的查找子节点的方法，及查找上一个兄弟的方法，及查找下一个兄弟的方法

获取子元素的兼容性写法：

获取上一个兄弟的兼容性写法：

获取下一个兄弟的兼容性写法：

9、获取元素的位置

offsetLeft 元素在网页中水平坐标值 ele.offsetLeft

offsetTop 元素在网页中垂直坐标值 ele.offsetTop

offsetWidth 元素在页面中占据的宽度 ele.offsetWidth

offsetHeight 元素在页面中占据的高度 ele. offsetHeight

HTML+css：

js及输出结果：

scrollLeft 滚动条在容器中水平滚动的距离 ele.scrollLeft

scrollTop 滚动条在容器中垂直滚动的距离 ele.scrollTop

测试的时候，先将页面设置的大一点，能看到滚动条：

当滚动条滚动的时候，输出滚动的距离：