项目十九 流程控制
前面我们学习了javascript基础以及程序语句，然而通过 JavaScript，我们还可以重构整个 HTML 文档，可以添加、移除、改变或重排HTML页面上的项目。
要改变页面的某个东西，JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。
教学目标
1. 如何改变 HTML 元素的内容 (innerHTML)；
2. 如何改变 HTML 元素的样式 (CSS)；
实践目标
1、 掌握JS修改HTML元素的方法
2、 掌握JS修改CSS样式的方法
知识储备
课前预习
1、请预习本章内容，了解下面名词的意义及作用
innerHTML：_______________________________________
document.getElementById（）：_________________________________
2、请简要回答以下问题：
1）如何通过js修改HTML元素？
2）如何通过js修改CSS样式？
一、DOM HTML
HTML DOM 允许 JavaScript 改变 HTML 元素的内容。修改 HTML 内容的最简单的方法时使用 innerHTML 属性。如需改变 HTML 元素的内容，请使用这个语法：
语法：
HTML 源代码：
代码解析：
1） 第6行:插入一张男生头像的图片，给图片命名一个id为"touxiang",换行；
2） 第7行：定义一个段落，文本内容为"我是男生"，给文本命名一个id为"sex"；
3） 第8行：定义一个文本链接，文本内容为"变性"。设置鼠标点击时获取id为"sex"d的元素的内容，并修改该html元素中的内容为"我是女生"。同时，获取id为"头像"的元素的内容，图片路径为"http://i3.tietuku.com/926b01c17441d559s.jpg"；
效果预览：
图：我是男生
图：我是女生
二、DOM CSS
HTML DOM 允许 JavaScript 改变 HTML 元素的样式。如需改变 HTML 元素的样式，请使用这个语法：
Javascript 语法格式：
1、修改background-image属性
HTML 源代码：
代码解析：
1） 第6行:定义一个DIV块，命名其id为"头像"，设置其CSS行内样式，背景图片地址为"http://img3.imgtn.bdimg.com/it/u=188659807,991590860&fm=21&gp=0.jpg"，背景图片的宽为500像素，高为500像素；
2） 第7行：定义一个段落，文本内容为"我是男生"，给文本命名一个id为"sex"；
3） 第8行：定义一个文本链接，文本内容为"变性"。设置鼠标点击时获取id为"sex"d的元素的内容，并修改该html元素中的内容为"我是女生"。同时，获取id为"touxiang"的元素的内容，修改其CSS样式中的背景图片样式，图片路径为"http://i3.tietuku.com/926b01c17441d559s.jpg"；
效果预览：
图：改变CSS—我是男生
图：改变CSS-我是女生
2、修改display属性——二级导航
HTML 源代码：
代码解析：
1） 第5-18行:定义导航条样式；
2） 第20-27行：定义一段js脚本；
3） 第21-23行：定义一个函数名为"changshow",并声明一个参数i，获取id"i"的元素，修改其CSS样式中的display样式属性为"block"显示；
4） 第24-26行：定义一个函数名为"changhidden",并声明一个参数i，获取id"i"的元素，修改其CSS样式中的display样式属性为"none"隐藏；
5） 第30-42行：定义一个通栏导航；
6） 第32-34行：给导航中的"home"文本链接后添加一个DIV块，id为"nav-float1"，上面的CSS中已设置其display属性为none，因此浏览不显示该DIV块。设置a链接的属性，鼠标移至链接时，执行"changeshow"函数（onmouseover="changeshow(this.name)），该函数中设置此时display属性是显示，因此可以看到home下方的二级菜单块。鼠标移开时，执行"changehidden"函数（onmouseout="changehidden(this.name)），该函数中设置此时display属性为none隐藏，因此浏览不显示二级菜单块。
7） 第35-41行：同理上。
效果预览：
图：鼠标经过时
图：鼠标移开时
小结：
JavaScript不仅可以制作很多实用的小程序，以及网页特效，而且最实用的就是可以直接通过javascript来修改HTML元素。我们可以通过javascript来添加、删除以及修改HTML中的元素。同时，通过javascript我们还可以修改页面中的CSS样式，网页中常见的导航二级菜单就是通过js的对象模型来实现的。运用javascript修改HTML元素以及CSS样式在实际网页制作中运用非常广泛。
项目实践
本章节我们学习了运用javascript来修改HTML元素以及ＣＳＳ样式，这在实际网页设计中运用非常广泛，但是也是比较难于理解的。下面将通过让同学们自己动手操作前面的三个案例，来熟悉和领悟javascript的运用。
任务一：修改页面中的文字和图像
任务描述：
运用innerHTML属性修改页面中的"我是男生"为"我是女生"，并且男生的头像也随着点击变为女生头像。
任务要求：
1、 运用innerHTML属性
2、 初始页面为男生头像，文字内容为"我是男生"；
3、 点击链接后，变为女生头像，文字内容为"我是女生"；
实践目标：
1、 熟悉javascript如何修改HTML元素；
参考步骤：
1、 插入一张男生头像的图片，设置图片标记的id号为"touxiang"；
2、 定义一个段落标记，在段落标记内定义一对标记，输入文本内容"我是男生"，并设置标记的id名称为"sex"；
3、 紧接着上面再定义一对段落标记，插入一个文本链接，文本内容为"变性"，设置链接的鼠标点击事件属性为，当鼠标编辑变性时，获取id号为"sex"的元素的文本内容，修改为"我是女生"，获取id为"touxiang"的元素修改其图片路径为即将替换的女生图片路径；
(HTML源码参考本章节对应的案例)
任务二：JS修改页面CSS样式
任务描述：
运用JS修改HTML页面中的背景图像。
任务要求：
1、 初始背景为男生头像，宽高各五百像素；
2、 点击链接后，背景变为女生头像，文字内容为"我是女生"；
实践目标：
1、 熟悉javascript如何修改HTML元素样式；
参考步骤：
1、 定义一个DIV块，命名id号为"touxiang"，设置其背景图片，宽高均为500像素；
2、 定义一个段落标记，在段落标记内定义一对标记，输入文本内容"我是男生"，并设置标记的id名称为"sex"；
3、 紧接着上面再定义一对段落标记，插入一个文本链接，文本内容为"变性"，设置链接的鼠标点击事件属性为，当鼠标编辑变性时，获取id号为"sex"的元素的文本内容，修改为"我是女生"，获取id为"touxiang"的元素修改其CSS样式中的背景图片样式，图片路径为"http://i3.tietuku.com/926b01c17441d559s.jpg"；
(HTML源码参考本章节对应的案例)
任务三：JS制作二级导航效果
任务描述：
运用JS制作常见的二级导航效果。
任务要求：
1、 导航配色美观大方；
2、 点击导航条上的文字，有二级菜单显示；
实践目标：
1、 能独立制作带二级菜单的导航；
参考步骤：
1、 搭建HTML框架，定义一个DIV块，命名id号为"nav"，然后定义一个六列的列表，设置超文本链接，需要显示的二级菜单块。设置a链接的鼠标经过事件以及鼠标移开事件；
2、 定义js函数，函数名称为changeshow，参数为i，执行获取参数i元素的CSS样式中的display样式为显示（block）；
3、 再继续定义一个函数，函数名为changehidden，参数为i，执行获取i的CSS样式中displ属性，并设置为隐藏(none)。
(HTML源码参考本章节对应的案例)
本章总结：
通过HTML DOM，可以访问Javascript HTML文档的所有元素，并且来修改页面中所有的HTML元素及其属性，也可以修改页面中的所有CSS样式，还可以对页面中的所有时间做出反应。这样大大加强了网页的丰富性和扩展性，让网页设计变得更加灵活。
作业：
一、简答题
1.什么是HTML DOM？
2.如何通过Javascript修改HTML元素？
3.如何通过javascript修改HTML元素样式？
