您的位置：首页 > Web前端 > JavaScript

js的简单操作结点

2011-01-07 14:49 239 查看 
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航