第四章 Document对象 JavaScript及网页特效制作课件 上机部分.ppt

上机4 Document对象 回顾 Document对象的常用属性有哪些？ 获取页面所有节点使用哪个属性？ 获取页面所有超链接使用哪个属性？ 上机任务 获取文本框输入的值。 遍历页面a标签。 遍历页面所有标签 打开新窗口并写入内容 训练技能点 掌握常用的Document对象属性。 掌握常用的Document对象方法。 任务1 任务说明 页面上有两个文本框，向其中任意一个文本框输入文字时，将输入的文字显示到另外一个文本框中。 任务1 掌握要点 onKeyPress事件的使用。 document.forms属性的使用。 实现思路 为两个文本框绑定onKeyPress事件。 获取当前正在输入的文本框的值。 将获取的值显示到另外一个文本框中。 任务1 参考代码 任务2 任务说明 页面包含多个a标签，使用document.links属性获取所有a标签，并取出内部的文本值拼接后输出。 任务2 实现思路 使用document.links取出所有a标签 遍历a标签数组，使用childNodes属性获取内部元素。 阶段2 任务3 任务说明 将页面所有标签名称遍历出来，显示在页面上。 任务3 掌握要点 document.all属性的使用。 实现思路 使用document.all.length属性获取页面所有标签的个数。 循环遍历document.all，获取标签名称。 任务3 参考代码 任务4 任务说明 打开一个空白的新窗口，向窗口中写入html内容。 任务4 实现思路 使用window.open()方法打开一个新窗口 使用document.write()方法向心窗口写入内容。 任务4 参考代码 任务4 作业 * * JavaScript与网页特效制作 效果演示 form name=first !--第一个表单-- 文本框1：!--用表单名引用表单及元素-- input type=text onKeyPress=document.second.elements[0].value=this.value;value=在这里输入内容 /form form name=second!--第二个表单-- 文本框2：!--用第二种方式引用表单及元素-- input type=text onKeyPress=document.forms[0].elements[0].value=this.value; value=在这里输入内容 /form 共性问题讲解、规范代码展示 效果演示 共性问题讲解、规范代码展示 效果演示 var i;//定义变量i var sum; /定义sun变量 sum = document.all.length;// 取得元素的个数 document.write(document.all.length=+sum+br /);// 输出个数 for (i = 0; i sum; i++) {//循环访问 document.write(document.all[+i+]=+document.all[i] .tagName+br /);// 输出各元素 } 共性问题讲解、规范代码展示 效果演示 newWindow=window.open(,, height=250, width=250,toolbar=no,enubar=no);//新建一个窗口 // 向新窗口中写入HTML的title newWindow.document.write(title例子/title) // 向新窗口中写入HTML的body newWindow.document.write(body bgcolor=#ffffff) ………………………………… 共性问题讲解、规范代码展示 本次上机总结