JavaScript高级（2）
目录
一、回顾与加强
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
测试的时候，先将页面设置的大一点，能看到滚动条：
当滚动条滚动的时候，输出滚动的距离：
