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會將操作的文檔分離爲兩個文檔
