一、BOM对象的综合案例
二、DOM对象2.1什么是DOM对象
2.3节点
2.4 DOM节点树
三、HTML DOM3.1 HTML DOM的属性
3.2HTML DOM的方法
3.3HTML DOM对标签属性的操作
四、全选、反选、取消
五、CSS DOM
六、事件 6.1什么是事件？
6.3事件的绑定方式
七、改变网页的背景颜色案例
八、表单验证案例
Document Object Model 文档对象模型
2.2 DOM对象作用DOM它主要是为了操作HTML文档提供了一些属性与方法 ！
2.3节点
HTML 文档中的每个部分都是一个节点
l 整个文档是一个文档节点
l 每个 HTML 标签是一个元素节点
l 包含在 HTML 元素中的文本是文本节点
l 每一个 HTML标签中的 属性是一个属性节点
2.4 DOM节点树
HTML 文档中的所有节点组成了一个文档树（或节点树）。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。
节点与节点之前是有等级的。
2.5 DOM对象的分类 l 核心 DOM：提供了操作XML和HTML文档属性与方法
l XML DOM：提供了操作XML文档属性与方法 ；
l HTML DOM：提供了操作HTML文档属性与方法
l CSS DOM：操作标签的style属性
三、HTML DOM3.1 HTML DOM的属性
属性名 | 功能 |
innerHTML | 获取或者设置双边标签里面的内容 |
document.body | 获取到到body标签对象 |
document.documentElement | 获取到根元素 html标签 |
document.forms | 获取到所有表单元素 返回是一个集合 |
document.images | 获取到所有的图片元素 返回是一个集合 |
3.2HTML DOM的方法
方法名 | 功能 |
document.getElementById(“id的属性值”) | 通过id的属性值来获取元素 它只能获取到一个元素 |
document.getElementsByTagName(“标签名”) | 通过标签名来获取元素 它返回是一个数组 如果要访问其中的某一个标签对象 要使用下标来进行访问！ 就算这个数组里面的元素只有一个 那么也是要使用数组下标的方式来进行访问！ |
父对象.getElementsByTagName(“标签名”) | [size=10.5000pt] |
document.getElementsByName(“name的属性值”) | 通过标签的name属性值来获取元素 它返回是一个数组 如果要访问其中的某一个标签对象 要使用下标来进行访问！ 就算这个数组里面的元素只有一个 那么也是要使用数组下标的方式来进行访问！ |
3.3HTML DOM对标签属性的操作
注意：这里其实是没有内置的方法 只是我们能大家总结出来的功能！
增、改
语法：
要操作的标签对象.属性名 = “值”
查询
语法：
要操作的标签对象.属性名
注意：
以上对标签属性的操作均不包含对class属性的操作！如果要对class属性进行操作 一定要把class这个属性名修改为className 才可以对class属性进行操作！
五、CSS DOM
css dom的作用：它主要是用来操作标签的style的属性 =è操作行内样式
<标签名 style=”CSS样式” >
设置或者修改：
语法：
要操作的标签对象.style.css属性 = “值”
获取：
语法：
要操作的标签对象.style.css属性
注意：
如果CSS属性是由2个或者以上的单词组成的，那么从第二个单词开始首字母要大写 并且要去掉中划线！驼峰法
background-color ===èbackgroundColor
案例：使用CSS DOM来实现点击按钮 如果DIV显示就按其隐藏 如果DIV是隐藏的就按其显赫。
比如当鼠标单击、当鼠标滑过、当鼠标离开 这些行为被称之为事件
6.2什么是事件驱动式？ 当事件发生时 会被JS捕获到 然后赋予其一些功能代码！
6.3事件的绑定方式
事件的绑定方式有两种：
1) 行内绑定事件
说明：所谓的行内绑定事件 是将事件写在HTML标签里面
格式：
<标签名 事件=“事件的处理程序 ” />
2) 动态绑定事件
说明：是将事件名写在JS代码里面
格式：
通过JS获取标签对象.事件名 = 事件的处理程序 事件的处理程序一般是一个匿名函数
在工作中，动态绑定使用的居多。
因为我们需要做到结构、样式、行为相分离
6.4事件列表l onclick 当鼠标单击时
l ondblclick 当鼠标双击时
l onload 当页面加载完成后 指body标签里面所有的标签都加载完成以后再来执行js代码
l onmouseover 当鼠标经过时
l onmouseout 当鼠标离开时
l onsubmit 当表单提交时 它主要是用来实现表单验证！这个事件要绑定给form标签上面
onsubmit事件它主要是用来阻止表单的默认行为。表单它本身就会具有提交的功能。如果表单数据不合法就将让表单提交，如果合法就让其提交。
onsubmit事件阻止表单提交分为行内绑定与动态绑定
1、动态绑定
2、行内绑定时
l [img=190,32]onfocus 当获取焦点时
l onblur 当失去焦点时
l onchange：当内容发生改变时 这个事件一般多用于select标签对象
[size=29.3333px]
[size=29.3333px]
[size=29.3333px]
[size=29.3333px]
思路分析：
1、开启一个定时器
2、定时器函数主要是用来执行图片轮播的效果
3、当鼠标放在图片上面时 ，图片就停止了轮播的效果 清除了定时器
4、当鼠标离开图片上面时，图片继续在执行轮播的效果 重新开启了定时器功能
5、当鼠标放在li标签上面时，图片就停止了轮播的效果 清除了定时器
6、当鼠标放在li标签上面时，还会显示li标签上面对应的数字的图片
7、当鼠标离开li标签上面时，图片就会继续开始轮播的效果 重新开启了定时器功能
8、li标签上面的高亮效果，它是随着图片滚动而滚动。