DOM 控制文本节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM控制文本节点</title>
</head>
<script type="text/javascript">
function processText(method){
var paraNode=document.getElementById("pId");
if(!paraNode.hasChildNodes())return; //检查元素是否有子节点
var textNode=paraNode.firstChild;//获取element 中的文本节点
if (textNode.nodeType==textNode.TEXT_NODE)//如果此接口类型为文本节点
{
switch(method){
case 0:
textNode.data=textNode.data.toUpperCase();
break;
case 1:
textNode.data=textNode.data.toLowerCase();
break;
case 2:
textNode.appendData("<_and>try you best to do it");
break;
case 3:
var preserveText=textNode.substringData(0,15);
textNode.replaceData(0,textNode.length-1,preserveText);
break;
case 4:
textNode.deleteData(0,textNode.length);
break;
}
}
else{
alert("没有字符串");
}
}
</script>
<body>
<!--1.CharacterData.data属性 CharacterData接口定义data 表示文本的内容
2.CharacterData.appendData()方法. CharacterData接口定义appendData()方法可以在文本末尾追加字符串
3.CharacterData.substringData(offset，count)方法,CharacterData定义substringData可以截取文本中的字符串
4.CharacterData.replaceData(offset， count，arg)方法,replaceData()定义可以替换文本内容
5.CharacterData.deleteData(offset,count),定义了删除字符串
offset 表示删除的起始位置，count表示删除的字符数-->
<p id="pId">
Do not pray for an easy life ,pray for the strength to endure a difficle one
</p>
<input type="button" value="转换成大写" onclick="processText(0)" />
<input type="button" value="转换成小写" onclick="processText(1)" />
<input type="button" value="追加新字符" onclick="processText(2)" />
<input type="button" value="保留前十个字符" onclick="processText(3)" />
<input type="button" value="删除全部文" onclick="processText(4)" />
<div id="divId"></div>
</body>
</html>
