欢迎来到天天文库
浏览记录
ID：24552666
大小：52.00 KB
页数：4页
时间：2018-11-15
《浅谈网页内容之动态更改》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。
1、浅谈网页内容之动态更改>>教育资源库动态HTML的出现为用户提供了一种基于传统标准HTML来创建交互式页面的机制。本文主要针对IE5.0谈谈如何通过其提供的HTML文档对象(DOM)模型使用脚本添加、删除、修改页面中的HTML元素(对象)及元素(对象)内容。 动态更改网页HTML元素(对象)内容 HTML块级元素(对象)提供的4个可读写属性innerHTML、innerText、outerHTML、outerText来更改元素(对象)内容(如表1所示)。 当设置innerHTML属性时，给定字符串完全替换现有的元素
2、(对象)内容，如果给定字符串中含有HTML格式标签，那么该字符串就会进行解析并格式化。当用innerText属性设置时，给定字符串也完全替换现有元素(对象)文本内容，但与innerHTML不同的是HTML格式标签是当做文本直接显示在页面中。若用outerHTML和outerTexe属性设置时，则完全替换元素(对象)。具体操作示例请参见PCL元素 IE5.0中文档对象模型(DOM)提供的修改元素(节点)的方法如表2所示。 在网页中添加新元素分为2个步骤，先创建新元素(对象)，然后再将新创建的元素(对象)插入到网页中。在
3、插入到网页之前，允许对该元素(对象)有关属性进行设置，但不能通过元素(对象)ID来引用。也可以使用ument.createElement创建新元素，该方法所带参数为用于元素的合法HTML格式标签字符串(包含元素属性)。此外还可以通过元素(对象)cloneNode方法复制该元素(对象)的途径来创建新元素。将新元素插入文档可以通过使用元素(对象)appendChild或insertBefore方法来实现，前者是在元素(对象)子元素集合末尾插入新元素，后者是在元素(对象)子元素集合中某个子元素前插入新元素。 替换、删除元素(
4、对象)需要注意:①在replaceChild、removeChild中指定的参数必须为该元素(对象)的直接子元素(对象);②在使用replaceNode替换元素(对象)时，所有与该元素(对象)相关的属性和内容也将被替换;③如果removeNode中指定参数为true，则该元素包含的所有子元素(节点)也将被删除，默认false,即不删除子元素(节点)。具体操作示例请参见PCL或文本内容此外，也可用insertAdjacenElement、insertAdjacentHTML和insertAdjacentText等方法分别在
5、元素(对象)的指定位置插入新元素(对象)、Html或文本内容(如表3所示)。 元素(对象)、HTML或文本内容插入的位置由参数指定。BeforeBegin指定插入在元素(对象)之前;afterBegin指定插入在元素(对象)的所有内容之前;beforeEnd指定插入在元素(对象)的所有内容之后;afterEnd指定插入在元素(对象)之后。具体操作示例请参见PCL属性建立菜单及子菜单(该程序利用了XML技术读取菜单数据，有关XML技术请参考相关手册)，该程序略加修改即可成为一个功能非常强大的实用菜单程序。综合运用示例源代
6、码如下。----<html><head>----<title>综合运用示例</title>----<script>varactiveMenu,menuContainer=null;----functionmenusetup(){----varparentMenuItems=MENUXML.selectNodes("//Menulist/menu");----varxmlElement=parentMenuItems.nextNode();----lElement
7、!=null){----varneent=ument.createElement("span");----neent.innerText=xmlElement.getAttribute("display");----neent.id=xmlElement.getAttribute("value")----neent.type="parentMenu"----neent.style.ent.style.backgroundColor="#CCCCCC";----menubar.appendChild(neent);----
8、xmlElement=parentMenuItems.nextNode();}}----functionmenuClick(){----EventSource=event.srcElement9731248:>>>>这篇文章来自..，。
此文档下载收益归作者所有
