第05章教案_JavaScript BOM和DOM教学设计.doc

《JavaScript与jQuery网页前端开发与设计-第2版》教案

第5章JavaScriptBOM和DOM

一、教学目标：

掌握JavaScriptDOM的用法；

掌握JavaScriptBOM的用法。

二、教学重点和难点：

重点：JavaScriptDOM的用法；

难点：JavaScriptBOM的用法。

三、教学方法与手段：

采取互动式教学方法，理论教学使用多媒体投影教室。

四、课程简介：

本章主要内容是JavaScript文档对象模型DOM和浏览器对象模型BOM的用法，在DOM部分主要包括对HTML元素的查找、动态创建、内容/属性修改，以及事件和节点；在BOM部分主要包括了5种常用对象。

五、教学基本内容：

5.1文档对象模型DOM

浏览器在加载网页时会创建文档对象模型（DocumentObjectModel，DOM）来确定网页中的元素层次结构，JavaScript可以通过DOM来动态改变HTML元素、属性、CSS样式以及对事件做出响应。

5.1.1查找HTML元素

在JavaScript中有三种方式可以查找HTML元素：

通过HTML元素的id名称查找；

通过HTML元素的标签名称查找；

通过HTML元素的类名称查找。

1. 通过id查找HTML元素

一般默认不同的HTML元素使用不一样的id名称以示区别，因此通过id名称找到指定的单个元素。在JavaScript中语法如下：

document.getElementById(id名称);

其中getElementById()方法是遵照驼峰命名法，即第一个单词全小写，后面的每一个单词首字母大写的方式。这种命名方法在JavaScript中比较普遍。如果未找到该元素，则返回值为null；如果找到该元素，则会以对象的形式返回。

例如，查找id=test的元素，并获取该元素内部的文本内容：

//根据id名称获取元素对象

vartest=document.getElementById(test);

//获取元素内容

varresult=test.innerHTML;

为简便代码阅读效果，使用了与id名称同名的变量test来获取指定元素，该变量名称也可以是其他自定义变量名，不影响运行效果。innerHTML可以用于获取元素内部的HTML代码，关于innerHTML更多用法请参考下一节5.12.2DOMHTML。

2. 通过标签名查找HTML元素

HTML元素均有固定的标签名称，因此通过标签名称可以找到指定的单个或一系列元素。在JavaScript中语法如下：

document.getElementsByTagName(标签名称);

此时方法中的Elements是复数形式，因为要考虑到有可能存在多个元素符合要求。同样如果未找到符合的元素，则返回值为null；如果有多个符合条件的元素，则返回值是数组的形式。

例如，查找所有的段落元素p，并获取第一个段落标签内部的文本内容：

vartest=document.getElementByTagName(p);

varresult=p[0].innerHTML;

因为有多个段落标签，因此变量返回值是数组的形式。其中第一个段落标签对应的是p[0]，以此类推，最后一个元素对应的索引号为数组长度减1。

3. 通过类名查找HTML元素

document.getElementsByClassName()方法可用于根据类名称获取HTML元素。在JavaScript中语法如下：

document.getElementsByClassName(类名称);

此时方法中的Elements是复数形式，因为要考虑到有可能存在多个元素符合要求。同样如果未找到符合的元素，则返回值为null；如果有多个符合条件的元素，则返回值是数组的形式。

注：该方法在IE5、6、7、8版本中使用均无效，为考虑各个版本浏览器的兼容性，如果不能保证用户使用IE5、6、7、8版本以外的浏览器则不建议使用此方法来获取HTML元素。

【例5-1】JavaScriptDOM查找元素的应用

分别使用根据id名称、标签名称和类名称查找指定的元素对象，并使用alert()语句输出指定元素对象的内容。

【代码说明】

本示例分别使用了document对象中的getElementById()、getElementsByTagName()和getElementsByClassName方法来获取指定的元素对象，其中getElementById()会根据id名称准确获取到唯一的元素，另外两个方法会根据元素标签名称或类名称获取符合条件的所有元素。

5.1.2DOMHTML

1. 创建动态的HTML内容

在JavaScript中，使用document.w