码迷,mamicode.com
首页 > 其他好文 > 详细

DOM 控制文本节点

时间:2017-12-02 16:21:47      阅读:167      评论:0      收藏:0      [点我收藏+]

标签:return   bsp   --   ace   logs   script   2-2   document   method   

技术分享图片

 

<!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>

DOM 控制文本节点

标签:return   bsp   --   ace   logs   script   2-2   document   method   

原文地址:http://www.cnblogs.com/wxhhts/p/7954330.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!