浅谈网页内容之动态更改

浅谈网页内容之动态更改动静html的展示为用户供给了一种鉴于保守规范html来创造交互式页面包车型的士体制。正文重要对准ie 5.0谈谈怎样经过其供给的html文书档案东西(dom)模子运用剧本增添、简略、窜改页面中的html元素(东西)及元素(东西)实质。 ---- 动静变动网页html元素(东西)实质 html块级元素(东西)供给的4个可读写属性innerhtml、innertext、 outerhtml、outertext来变动元素(东西)实质(如表1所示)。

---- 当树立innerhtml属性时，给定字符串实足替代现有的元素(东西)实质，即使给定字符串中含有html方法标签，那么该字符串就会举行领会并方法化。当用innertext属性树立时，给定字符串也实足替代现有元素(东西)文本实质，但与innerhtml各别的是html方法标签是当作文本径直表露在页面中。若用outerhtml和outertexe属性树立时，则实足替代元素(东西)。简直操纵示例请拜见pc world china网站的关系实质。 ---- 窜改网页html元素 ie 5.0华文档东西模子(dom)供给的窜改元素(节点)的本领如表2所示。

---- 在网页中增添新元素分为2个办法，先创造新元素(东西)，而后再将新创造的元素(东西)插入到网页中。在插入到网页之前，承诺对该元素(东西)相关属性举行树立，但不许经过元素(东西)id来援用。也不妨运用document.createelement创造新元素，该本领所带参数为用来元素的正当html方法标签名符串(包括元素属性)。其余还不妨经过元素(东西)clonenode本领复制该元素(东西)的道路来创造新元素。将新元素插入文书档案不妨经过运用元素(东西)appendchild或insertbefore本领来实行，前者是在元素(东西)子元素汇合结束插入新元素，后者是在元素(东西)子元素汇合中某个子元素前插入新元素。 ---- 替代、简略元素(东西)须要提防: ①在replacechild、removechild中指定的参数必需为该元素(东西)的径直子元素(东西); ②在运用replacenode替代元素(东西)时，一切与该元素(东西)关系的属性和实质也将被替代;③即使removenode中指定参数为true，则该元素包括的一切子元素(节点)也将被简略，默许false,即不简略子元素(节点)。简直操纵示例请拜见pc world china网站的关系实质。 ---- 插入彀页新元素(东西)、html或文本实质 其余，也可用insertadjacenelement、insertadjacenthtml和insertadjacenttext等本领辨别在元素(东西)的指定场所插入新元素(东西)、html或文本实质(如表3所示)。

---- 元素(东西)、html或文本实质插入的场所由参数指定。beforebegin指定插入在元素(东西)之前; afterbegin指定插入在元素(东西)的一切实质之前; beforeend指定插入在元素(东西)的一切实质之后; afterend指定插入在元素(东西)之后。简直操纵示例请拜见pc world china网站的关系实质。 ---- 网页动静变动归纳应用 咱们以菜单步调为例演练网页元素及元素实质窜改的运用。该步调精巧应用了元素创造、追加、简略等本领及innerhtml属性创造菜单及子菜单(该步调运用了xml本领读取菜单数据，相关xml本领请参考关系画册)，该步调略加窜改即可变成一个功效特殊宏大的适用菜单步调。归纳应用示例源代码如次。 ---- < !-- saved from url=(0022)http://internet.e-mail -- > ---- < html >< head > ---- < title >归纳应用示例< /title > ---- < script > var activemenu,menucontainer=null; ---- function menusetup(){ ---- var parentmenuitems=menuxml.selectnodes("//menulist/menu"); ---- var xmlelement=parentmenuitems.nextnode(); ---- while (xmlelement!=null){ ---- var newelement=document.createelement("span"); ---- newelement.innertext =xmlelement.getattribute("display"); ---- newelement.id=xmlelement.getattribute("value") ---- newelement.type="parentmenu" ---- newelement.style.width=100; ---- newelement.style.backgroundcolor="#cccccc"; ---- menubar.appendchild(newelement); ---- xmlelement = parentmenuitems.nextnode(); }} ---- function menuclick(){ ---- eventsource=event.srcelement ---- switch(eventsource.type){ ---- case "parentmenu": ---- removesubmenu(); ---- buildsubmenu(eventsource.id); ---- eventsource.setcapture(); ---- activemenu=eventsource; ---- break; ---- default: ---- activemenu.releasecapture(); ---- removesubmenu(); ---- activemenu=null; ---- break;} } ---- function buildsubmenu(eventsourceid){ ---- menucontainer=document.createelement("div"); ---- menucontainer.style.backgroundcolor="#dd00dd"; ---- menucontainer.style.width=100; ---- eval(eventsourceid).appendchild(menucontainer); ---- var submenuitems=menuxml.selectnodes("//menu[@value='"+eventsourceid+"']/item"); ---- var xmlelement=submenuitems.nextnode(); ---- while (xmlelement!=null){ ---- var newelement=document.createelement("div"); ---- newelement.innerhtml=xmlelement.getattribute("display"); ---- menucontainer.appendchild(newelement); ---- xmlelement=submenuitems.nextnode(); }} ---- function removesubmenu(){ ---- if(menucontainer!=null)menucontainer.removenode(true);} ---- < /script > ---- < /head >< body onload=menusetup() > ---- < xml id=menuxml >< menulist > ---- < menu display="file" value="file" > ---- < item display="new" value="new"/ > ---- < item display="open" value="open" / > ---- < item display="save" value="save" / > ---- < /menu > ---- < /menulist >< /xml > ---- < div id=menubar onclick=menuclick() >< /div > ---- < /body >< /html > 对于动静html ---- 又称dhtml，是连年来搜集兴盛过程中最令人冲动的革新之一，它供给了一种在网页载入后仍不妨经过存户端欣赏器来随时调换实质或表面的本领。它不是一项特意本领，而是经过百般本领的归纳兴盛得以实行的观念，那些本领囊括dom(文书档案东西模子)、jscript、css等。dhtml的中心是dom模子，恰是它使得保守html谈话所编写的网页完备了动静个性。提防: 各别欣赏器所扶助的dom模子是不实足沟通的。