JavaScript及网页特效制作课件 上机部分.ppt

上机3 文档对象模型(DOM) 回顾 DOM是什么？ DOM节点是什么？ 定位指定元素的方法有哪些？ 添加子节点的方法是什么？ 上机任务 页面生成新节点。 页面动态生成表格。 动态设置表格属性 训练技能点 掌握DOM常用属性。 掌握节点的操作。 任务1 任务说明 使用createElement()方法生成两个新的div节点，填充内容显示在页面上。 任务1 掌握要点 createElement()方法的使用。 createNode()方法的使用。 appendChild()方法的使用。 实现思路 使用createElement()方法创建div节点。 使用createNode()方法创建文本内容节点。 使用appendChild()方法将生成的元素节点关联到一起。 任务1 参考代码 任务2 任务说明 动态生成一个4行4列的表格显示到页面，单元格中显示当前是第几行第几列的单元格。 任务2 实现思路 使用createElement()方法生成table、tbody、tr、td节点。 使用appendChild()方法关联节点关系。 任务3 任务说明 创建一个2行2列的表格，设置第一列单元格颜色为红色。 任务3 掌握要点 元素节点style属性。 实现思路 createElement()方法创建表格元素。 使用style属性设置颜色。 任务3 参考代码 任务4 作业 * * JavaScript与网页特效制作 效果演示 //兼容性控制 var bodyTag=document.body || document.documentElement ; var areaA=document.createElement(div); //……………..设置div各项属性……… var leftSideBar=document.createElement(div); //……………..设置div各项属性….. var leftSideBarH4=document.createElement(h1); var para=document.createElement(p); var paraText=document.createTextNode(谢谢合作。); para.appendChild(paraText); //添加一个子节点 var leftSideBarH4Text=document.createTextNode(参加展会); leftSideBarH4.appendChild(leftSideBarH4Text); leftSideBar.appendChild(leftSideBarH4); leftSideBar.appendChild(para); areaA.appendChild(leftSideBar); bodyTag.appendChild(areaA); 共性问题讲解、规范代码展示 效果演示 共性问题讲解、规范代码展示 效果演示 // 如果在第0列设置单元格背景色 if (i == 0) { mycurrent_cell.style.background = rgb(255,0,0); } 共性问题讲解、规范代码展示 本次上机总结