JavaScript程序设计实例教程 刘万辉 教学 课件 第7章 常用文档对象新.pptVIP

列表及列表选项控件元素对象 7.2.3 表单(form)及其控件元素对象 列表项属性 myList.option[1].value结果为“1” 选项的值 value myList.option[1].text结果为“安徽省” 选项的文字内容 text 选项初始时是否选上 defaultSelected 对于图（c）多选列表 myList.option[1].selected和myList.option[2].selected结果都是true 选项是否选上 selected 示例 意义 属性 列表及列表选项控件元素对象 7.2.3 表单(form)及其控件元素对象 在JavaScript中对列表进行添加、删除选项的操作如下。 （1）添加列表选项：首先新建一个选项对象，然后将该对象赋值给列表选项数组中。新建选项对象语法规则如下所示，其中方括号中的参数项表示可以省略。 new Option([选项的文字内容,[选项值[,初始是否选项[,是否选上]]]]); 例如，下述两行程序将为图中的列表又添加一个选项。 var new Option=new Option(重庆,3); myList.option[3]=newOption; （2）删除列表选项：只要将列表选项数组中指定的选项赋值为null就可以了。例如，下列程序将删除图中的列表第二项。 myList.option[1]=null; 7.2.3 表单(form)及其控件元素对象 【实例7-4】如图所示的表单中form1中有两个多选列表框，用户可以从左侧列表中选择任意项，然后点击“右移”按钮将所选项移动到右侧的列表中，同样也可以点击“左移”按钮将所选项移动到左侧的列表中。 项目演示 【示例7-4 】 7.5 实例：飘动的广告 本实训的网页飘动广告效果主要展示企业“诚招全国代理”的飘动广告条，使用DIV标记结合JavaScript代码实现 ，结果如图所示。 项目演示 谢谢大家 在线教务辅导网： 更多课程配套课件资源请访问在线教务辅导网 JavaScript课程开发组制作 第7章 常用文档对象 本章要点 第7章 常用文档对象 文档对象结构 文档对象 实例：飘动的广告 7.1.1 文档对象模型 7.1 文档对象结构  Window Screen Frames History Navigator Location Document Script Forms Anchors Link Input Select … Textarea 浏览器网页的文档对象模型结构图 7.1.1 文档对象模型 7.1 文档对象结构  网页对象与JavaScript事件处理的关系 HTML文档中的元素静态提供了各级文档对象的内容，CSS设置了网页显示的样式，网页对象与JavaScript事件处理的关系，如图所示。 JavaScript函数 作用在对象上的事件 用户与网页的交互操作 网页 浏览器对象 7.1.1 文档对象模型 【示例7-1】文档对象与事件处理的关系，左图中的“点击一下”按钮，但点击一次后，按钮失效，不可再次点击，右图所示，点击“重置元素”按钮后，恢复按钮的功能。 项目演示 【示例7-1 】 7.1.1 文档对象模型 失效函数与重置函数的代码如下： function buttonDisable() { document.getElementById(buttonTest).disabled = true; } function buttonRe() { document.getElementById(buttonTest).disabled = false; } “单击测试”按钮与“重置元素”按钮的HTML代码如下： form name=form1 input type=button id=buttonTest name=but1 value= 单击测试 onClick=buttonDisable() input type=button id=buttonReset name= but2 value= 重置元素 onClick=buttonRe() /form 7.1.2 文档对象的节点树 文档对象中的内容与HTML文档中的元素是相对应的。实际上，每一个HTML文档都可以用节点树结构来表现，并且通过元素、属性和文字内容3要素来描述每一个节点。 文档对象document 头节点元素head 标题节点元素title 文字内容“文档对象” 标题节点元素h1 段落 节点元素p 文字内容“