基于DOM的Web应用程序示例课件.ppt

《基于DOM的Web应用程序示例课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、基于DOM的Web应用程序示例首先建立一个非常简单的应用程序，然后再添加一点DOM魔法。注意，DOM可以移动网页中的任何东西而不需要提交表单。创建一个简单的网页，上面只显示一个普通的旧式大礼帽，还有一个标记为HocusPocus!的按钮初始的HTML清单注意按钮的类型是button而不是提交按钮。如果使用提交按钮，单击该按钮将导致浏览器提交表单。通过使用一般输入按钮而不是提交按钮，可以把JavaScript函数和它连接起来与浏览器交互而无需提交表单初始的HTML页面预览目标效果下面增加一些魔法，用兔子的图片替换页面中原有的图片：使用

2、getElementById()函数获得元素节点首先找到网页中表示img元素的DOM节点。一般来说，最简单的办法是用getElementById()方法，它属于代表Web页面的document对象：varelementNode=document.getElementById(“id");修改图片，麻烦的办法完成所需修改有几种方法：有些简单，有些麻烦。但是运用较麻烦的办法是一次很好的DOM练习，首先看看换图片比较麻烦的办法；后面再重新分析一下看看有没有更简单的办法用带兔子的新照片替换原有图片的办法如下：1、创建新的img元素2、访问当

3、前img元素的父元素，也就是它的容器3、在已有img元素之前插入新的img元素作为该容器的子级4、删除原来的img元素5、结合起来以便在用户单击按钮时调用刚刚创建的函数1、创建新的img元素创建新的img元素：varnewImage=document.createElement("img");可以创建一个新的元素节点，元素名为img。在HTML中基本上就是：下面需要增加一个属性src，它指定了要加载的图片：newImage.setAttribute("src","rabbit-hat.gif");注：如果对已有的属性调用

4、setAttribute()，则把原来的值替换为指定的值。但是，如果调用setAttribute()并指定一个不存在的属性，DOM就会使用提供的值增加一个属性2、获得原始图片的父元素现在有了要插入的图片，还需要找到插入的地方。要将其插入到已有图片之前然后再删除原来的图片。为此需要知道已有图片的父元素：varimgParent=hatImage.parentNode;3、插入新图片添加子节点的方法：insertBefore(newNode,targetNode)appendChild(newNode)把新图片元素插入到原有图片之前：i

5、mgParent.insertBefore(newImage,hatImage);现在原图片的父元素有了两个子元素：新图片和紧跟在后面的旧图片4、删除旧图片因为已经得到了旧图片元素的父节点，只要调用removeChild()并把需要删除的节点传递给它即可：imgParent.removeChild(hatImage);完整的JavaScript函数：5、表单元素连接JavaScript每当用户点击HocusPocus!按钮的时候运行showRabbit()函数。为此只要向HTML中增加一个简单的onclick事件处理程序即可：思考：

6、替换图片更简单的办法1、使用replaceChild()函数imgParent.replaceChild(newImage,hatImage);2、直接修改图片的src属性hatImage.setAttribute("src","rabbit-hat.gif");3、使用HTMLDOM方法hatImage.src=“rabbit-hat.gif”;然后…把兔子藏起来虽然兔子从帽子中跳出来了，但是屏幕下方的按钮仍然显示HocusPocus!和调用showRabbit()，下面做一些修改，当用户再次点击按钮时把兔子藏起来！1、修改按钮的

7、标签使用我们熟悉的方法，实现这个简单的功能，在showRabbit()函数中添加如下语句：2、隐藏兔子隐藏兔子的方法基本上和放兔子出来完全相反，将图片的src属性再改回旧图片。创建一个新的JavaScript函数来完成这项任务：3、更改事件处理函数现在虽然按钮的标签改变了，但是单击按钮时的动作没有变。当用户单击按钮时可以使用DOM改变事件或者发生的动作。在JavaScript中，可以通过按钮的onclick属性来引用该事件，因此可以改变按钮触发的事件：只要赋给onclick属性一个新的函数