网页设计与开发第15章JavaScript对象编程.ppt

当单击“深度复制”按钮时将会复制一个新的下拉列表框并包含其选项如图15-34所示。 图15-34 深度复制后 程序代码如下： head title复制节点/title script language=javascript !-- function AddRow(bl) var sel=document.getElementById(sexType); //访问节点 var newSelect=sel.cloneNode(bl); //复制节点 var b=document.createElement(br); //创建节点元素 di.appendChild(newSelect); //将新节点添加到当前节点的未尾 di.appendChild(b); -- /script /head body form hr select name=sexType id=sexType option value=%请选择性别/option option value=0男/option option value=1女/option /select hr div id=di/div input type=button value=复制 onClick=AddRow(false)/ input type=button value=深度复制 onClick=AddRow(true)/ /form /body 4．节点的删除与替换 删除节点 删除节点通过使用removeChild方法来实现。removeChild()方法该方法用来删除一个子节点。 obj. removeChild(oldChild) 参数oldChild表示需要删除的节点。 【例15-22】 本实例将通过DOM对象的removeChild()方法，动态删除页面中所选中的文本。代码如下： head title删除节点/title script language=javascript !-- function delNode() var deleteN=document.getElementById(di); //访问节点 if(deleteN.hasChildNodes()) //判断是否有子节点 { deleteN.removeChild(deleteN.lastChild); //删除节点 } -- /script /head body h1删除节点/h1 div id=di p第一行文本/p p第二行文本/p p第三行文本/p /div form input type=button value=删除 onclick=delNode(); / /form /body 运行结果如图15-35和图15-36所示。 图15-35 删除节点前 图15-36 删除节点后 替换节点 替换节点可以使用replaceChild方法来实现。replaceChild()方法用来将旧的节点替换成新的节点。 obj. replaceChild(new,old) new：替换后的新节点。 old：需要被替换的旧节点。 【例15-23】 本实例主要实现节点的替换功能。 本实例在页面中输入替换后的标记和文本，如图15-37所示，单击“替换”按钮将原来的文本和标记替换成为新的文本和标记，如图15-38所示。 图15-37 替换节点前 图15-38 替换节点后 程序代码如下： head title替换节点/title script language=javascript !-- function repN(str,bj) { var rep=document.getElementById(b1); //访问节点 if(rep) { var newNode=document.createElement(bj); //创建节点元素 newNode.id=b1; var newText=document.createTextNode(str); //创建文本节点 newNode.appendChild(newText); //将新节点添加到当前节点的未尾 rep.parentNode.replaceChild(ne