<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html140/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <title>First Page!</title> </head> <body> <p id="p1"> Welcome to<b> DOM </b>World! </p> <mce:script language="JavaScript" type="text/javascript"><!-- function nodeStatus(node) { var temp=""; if(node.nodeName!=null) { temp+="nodeName: "+node.nodeName+"/n"; } else temp+="nodeName: null!/n"; if(node.nodeType!=null) { temp+="nodeType: "+node.nodeType+"/n"; } else temp+="nodeType: null/n"; if(node.nodeValue!=null) { temp+="nodeValue: "+node.nodeValue+"/n/n"; } else temp+="nodeValue: null/n/n"; return temp; } //输出节点树相关信息 //返回id属性值为p1的元素节点 var parentElement=document.getElementById('p1'); var msg="insertBefore方法之前:/n" msg+=nodeStatus(parentElement); //返回p1的第一个孩子,即文本节点“Welcome to” var targetElement=parentElement.firstChild; targetElement.data="data";//使用赋值 targetElement.appendData("appendData");//在数据串之后附加数据 targetElement.insertData(4,"insertData");//在第四个位置插入,从一开始. msg+=nodeStatus(targetElement); //返回文本节点“Welcome to”的下一个同父节点,即元素节点B var currentElement=targetElement.nextSibling; msg+=nodeStatus(currentElement); //返回元素节点P的最后一个孩子,即文本节点“World!” currentElement=parentElement.lastChild; msg+=nodeStatus(currentElement); //生成新文本节点“NUDT YSQ”,并插入到文本节点“Welcome to”之前 var newTextNode= document.createTextNode("NUDT YSQ"); //创建一个文本结点 parentElement.insertBefore(newTextNode,targetElement); //把创建的文本结点插入到targetElement里面. msg+="insertBefore方法之后:/n"+nodeStatus(parentElement); //返回p1的第一个孩子,即文本节点“NUDT YSQ” targetElement=parentElement.firstChild; targetElement.deleteData(0,4);//删除targetElement的前四个字母. targetElement.replaceData(0,3,"hii");//替换前面三个字母. var tempNode=targetElement.substringData(0,5); //取得一段字符串. //使用splitText( )方法将文本节点内容从指定位置分为两部分,左边为原始节点,右边赋值给新节点 var tempNode1=targetElement.splitText(2); document.write(tempNode1.nodeValue+"/n"); document.write(tempNode); msg+=nodeStatus(targetElement); //返回文本节点“Welcome to”的下一个同父节点,即元素节点“Welcome to” var currentElement=targetElement.nextSibling; msg+=nodeStatus(currentElement); //返回元素节点P的最后一个孩子,即文本节点“World!” currentElement=parentElement.lastChild; msg+=nodeStatus(currentElement); //输出节点属性 alert(msg); // --></mce:script> </body> </html>