动态改变网页的HTML元素(对象)的内容

动态HTML的出现为用户提供了一种基于传统标准HTML创建交互页面的机制。本文主要讲述如何通过IE 5.0提供的HTML文档对象(DOM)模型，使用脚本对页面中的HTML元素(对象)和元素(对象)进行添加、删除和修改。网页的HTML块级元素(对象)提供的innerHTML、innerText、outerHTML和outerText四种可读可写的属性被动态改变，以改变元素(对象)的内容(如表1所示)。

当设置了innerHTML属性时，给定的字符串将完全替换现有的元素(对象)内容。如果给定的字符串包含HTML格式标记，将对该字符串进行解析和格式化。当用innerText属性设置时，给定的字符串也完全替换了现有的元素(对象)文本内容，但是与innerHTML不同，HTML格式标记作为文本直接显示在页面上。当用外部HTML和外部文本属性设置时，元素(对象)被完全替换。具体操作示例请参考PC World中国网站相关内容。IE 5.0中文档对象模型(DOM)提供的元素(节点)修改方法如表2所示。

向网页添加新元素分为两个步骤。首先，创建新元素(对象)，然后将新创建的元素(对象)插入到网页中。插入网页前，允许设置元素(对象)的相关属性，但不能被元素(对象)标识引用。您也可以使用document.createElement来创建一个新元素，该元素采用合法的HTML格式标记字符串(包括元素属性)。此外，可以通过克隆代码方法复制元素(对象)来创建新元素。向文档中插入新元素可以通过使用元素(对象)appendChild或insertBefore方法来实现。前者是在element (object)子元素集合的末尾插入一个新元素，后者是在element (object)子元素集合的子元素之前插入一个新元素。 (1)在replaceChild和removeChild中指定的参数必须是元素(对象)的直接子元素(对象)；用replaceNode替换元素(对象)时，与该元素(对象)相关的所有属性和内容也会被替换；如果removeNode中指定的参数为true，则该元素中包含的所有子元素(节点)也将被删除，默认值为false，即不删除任何子元素(节点)。具体操作示例请参考PC World中国网站相关内容。插入网页的新元素(对象)、Html或文本内容。此外，还可以分别使用insertAdjacenElement、insertAdjacentHTML和insertAdjacentText在元素(对象)的指定位置插入新元素(对象)、HTML或文本内容(如表3所示)。

元素（对象)、HTML或文本内容插入的位置由参数指定开始前指定插入在元素（对象)之前；开始后指定插入在元素（对象)的所有内容之前；beforeEnd指定插入在元素（对象)的所有内容之后；后端指定插入在元素（对象)之后。具体操作示例请参见个人电脑世界中国网站的相关内容。网页动态更改综合运用我们以菜单程序为例演示网页元素及元素内容修改的应用。该程序灵活运用了元素创建、追加、删除等方法及innerHTML属性建立菜单及子菜单（该程序利用了可扩展置标语言技术读取菜单数据，有关可扩展置标语言技术请参考相关手册),该程序略加修改即可成为一个功能非常强大的实用菜单程序。综合运用示例源代码如下- html标题-标题综合运用示例/title -脚本var activeMenu，menuContainer=null-function menusetup(){-var parentMenuItems=menu XML。select nodes('//Menulist/menu ')；-var XML element=parent menuitems。next node()；- while (xmlElement！=null){-var new element=document。创建元素(“span”)；-NewElement。InnerText=xmleLement。GetAttribute(' display ')；-NewElement。id=XmlElement。GetAttribute(' value ')-new element。type=' ParentMenu '-NewElement。风格。宽度=100；新元素。风格。背景色=' # CCCCCC '；-梅努巴尔。append child(NewElement)；-XML element=parent menuitems。next node()；} }-函数menuClick(){-事件源=事件。开关(事件源。type){-大小写“ParentMenu”:-remove subscribe()；建造子菜单(事件来源。id)；-事件源。setcapture()；-活动菜单=事件源；-休息；-默认：-活动菜单。释放捕获()；-移除子菜单();-活动菜单=空；-休息；} } -函数建设子菜单(EventSourceID){-MenuContainer=document。create element(' div ')；-MenuContainer。风格。背景色=' # DD00DD-MenuContainer。风格。宽度=100；- eval(EventSourceid).appendChild(MenuContainer)；-var子菜单项=menuxml。选择节点('//菜单[@ value=' EventSourceid ' ']/Item ')；-var XML element=子菜单项。next node()；- while (xmlElement！=null){-var new element=document。创建元素(' div ')；-NewElement。InnerHTML=xmleLement。GetAttribute(' display ')；-menucontainer。appendchild(新元素)；-XML element=子菜单项。next node()；}} -函数移除subscribe(){-if(MenuContainer！=null)MenuContainer。移除节点(真)；}-/script-/head body on load=menusetup()-XML id=menuxl Menulist-菜单显示='文件'值='文件'-项目显示='新建'值='新建'/-项目显示='打开'值='打开'/-项目显示='保存'值=' Save '/-/menu-/Menulist/XML-div id=menubar onclick=menuClick()/div-/body/html站长用爪哇岛描述语言直接生成元素的代码-start-input type=' button ' name=' aa ' value=' aa ' onclick=' showDiv()；'/AbcDescriptFuncTion ShowDiv(){ var div=document。create element(' div ')；div。风格。top=300div。风格。左=300；div。风格。背景颜色='红色'；div。风格。display=' inline' div.innerHTML='你好，世界；文件。尸体。append child(div)；}/脚本-结束-关于动态超文本标记语言又称DHTML，是近年来网络发展进程中最令人激动的创新之一，它提供了一种在网页下载后仍可以通过客户端浏览器来随时更换内容或外观的能力。它不是一项专门技术，而是通过各种技术的综合发展得以实现的概念，这些技术包括DOM(文档对象模型)、Jscript、CSS等DHTML。的核心是数字正射影像图模型，正是它使得传统超文本标记语言语言所编写的网页具备了动态特性。注意： 不同浏览器所支持的数字正射影像图模型是不完全相同的。