JavaScript与HTML交互最主要的是使用DOM进行控制HTML的文档信息。对于具有全标签结构的HTML元素可以分为属性和文本两部分，下面我们将对文本这一部分进行详细的讲解。话先不多说先举个栗子压压惊。
<!DOCTYPE html>
<html>
<head>
<title>text的使用</title>
<meta charset="utf-8">
</head>
<body>
<p id="text">hello,my name is <strong>jifukui</strong> and I like play football <i>good game</i> </p>
<input type="button" onclick="firstWhole()" value="显示第一个子文档的内容">
<hr>
<input type="button" onclick="firstdata()" value="显示第一个子文档的内容">
<hr>
<input type="button" onclick="datalength()" value="显示第一个子文档的字符串的长度">
<hr>
<input type="button" onclick="deletelast()" value="删除第一个子文档的字符串的最后一个字符">
<hr>
<input type="button" onclick="addlast()" value="添加第一个子文档的字符串的最后一个字符">
<hr>
<input type="button" onclick="reset()" value="复位第一个子文档的字符串">
<hr>
<input type="button" onclick="display()" value="显示第一个子文档第2个字符到最后一个字符">
<hr>
<input type="button" onclick="display1()" value="显示第一个子文档的后一半的内容">
<hr>
<script>
var dim=document.getElementById("text");
function firstWhole(){
window.alert("当前文档的第一个子text的内容 "+dim.firstChild.wholeText);
}
function firstdata(){
window.alert("当前文档的第一个子text的内容 "+dim.firstChild.data);
}
function datalength(){
window.alert("当前文档的第一个子text的长度"+dim.firstChild.length);
}
function deletelast(){
dim.firstChild.deleteData(dim.firstChild.length-1,1);
}
function addlast(){
dim.firstChild.insertData(dim.firstChild.length,"a");
}
function reset(){
dim.firstChild.replaceWith("hello,my name is ");
}
function display(){
window.alert("当前文档的第一个子text第2个字符到最后一个字符的内容 "+dim.firstChild.substringData(1,-1));
}
function display1(){
//window.alert("当前文档的第一个子text后一半的内容 "+dim.firstChild.splitText(dim.firstChild.length/2).data);
dim.firstChild.splitText(dim.firstChild.length/2);
}
</script>
</body>
</html>
这程序的主要的思想是创建一个具有文本内容的标签<p>id为text其中包含一个强调标签和斜体标签。使用childNodes属性可以看到当前的标签的孩子节点的类型和数量。
创建了一系列的标签用于显示或者设置当前标签的文本内容。
显示为显示第一个子文档的内容1的按钮用于显示当前元素的第一个子节点的文本内容使用的是wholeText属性。
显示为显示第一个子文档的内容2的按钮用于显示当前元素的第一个子节点的文本内容使用的是data属性，同时可以使用此属性设置此文本节点的内容。
显示为显示第一个子文档的字符串的长度的按钮用于显示当前元素的第一个子节点的文本内容的长度。
显示为删除第一个子文档的字符串的最后一个字符，用于删除当前元素的第一个子节点的文本内容的最后一个字符。
显示为在第一个子文档的字符串的后面添加一个字符a，用于在当前元素的第一个子节点的末尾添加一个a字符。
显示为在第一个子文档的字符串的后面添加一个字符串jifukuitest，用于在当前元素的第一个子节点的末尾添加"jifukuitest"字符。
显示为复位第一个子文档的字符串，用于将当前元素的第一个子节点设置为hello,my name is 即设置为初始的值。
显示为显示第一个子文档第2个字符到最后一个字符，用于显示当前元素的第一个子节点第2个字符到最后一个字符的值。
显示为元素第一个子文档分离，用于将当前元素的第一个子节点的文档内容进行分类为两部分。
上述操作使用的属性和方法为：
（1）wholeText属性为显示文本内容
（2）data属性可以设置或获取文本内容
（3）length属性可以获取当前文本的内容的长度
（4）deleteData方法用于删除文本中的内容，包含两个参数offset相对于文本头的偏移位置，count删除字符的数量。
（5）insertData方法用于向文本中插入内容，包含两个参数offset相对于文本头的偏移位置，和需要插入的字符串。
（6）replaceWith方法用于将文本中的内容替换为指定的字符串，包含一个参数即需要替换的参数。
（7）substringData方法用于获取指定位置的文本内容，包含两个参数，第一个参数为offset为相对于文本头的偏移位置，第二个参数为获取字符的数量。
（8）splitText方法为将文本隔离为两个文本，包含一个位置即将文本隔离为两个文本的相对于文本头的偏移位置。
（9）replaceData用于值文本的指定位置添加数据，replaceData函数包含3个参数第一个参数是相对于文本起始位置的偏移位置，第二个参数为数量，第3个参数为替换的字符串。
效果图如下
需要注意的是使用splitText会将操作的文档分离为两个文档
