Text類型
文本節(jié)點(diǎn)由Text 類型表示，包含的是可以照字面解釋的純文本內(nèi)容荚守。純文本中可以包含轉(zhuǎn)義后的HTML 字符，但不能包含HTML 代碼。
-
Text 節(jié)點(diǎn)具有以下特征：
- nodeType 的值為3忍法；
- nodeName 的值為"#text"；
- nodeValue 的值為節(jié)點(diǎn)所包含的文本榕吼；
- parentNode 是一個(gè)Element饿序；
- 不支持（沒(méi)有）子節(jié)點(diǎn)。
可以通過(guò)nodeValue 屬性或data屬性訪問(wèn)Text節(jié)點(diǎn)中包含的文本羹蚣，這兩個(gè)屬性中包含的值相同原探。
-
使用下列方法可以操作節(jié)點(diǎn)中的文本。
-
appendData(text)：將text 添加到節(jié)點(diǎn)的末尾顽素。 -
deleteData(offset, count)：從offset 指定的位置開(kāi)始刪除count 個(gè)字符咽弦。 -
insertData(offset, text)：在offset 指定的位置插入text。 -
replaceData(offset,count,text)：用text替換從offset指定的位置開(kāi)始到offset+count 為止處的文本戈抄。 -
splitText(offset)：從offset 指定的位置將當(dāng)前文本節(jié)點(diǎn)分成兩個(gè)文本節(jié)點(diǎn)离唬。 -
substringData(offset, count)：提取從offset 指定的位置開(kāi)始到offset+count 為止處的字符串。
-
<!-- 沒(méi)有內(nèi)容划鸽，也就沒(méi)有文本節(jié)點(diǎn) -->
<div></div>
<!-- 有空格输莺，因而有一個(gè)文本節(jié)點(diǎn) -->
<div> </div>
<!-- 有內(nèi)容，因而有一個(gè)文本節(jié)點(diǎn)-->
<div>Hello World!</div>
var textNode = div.firstChild; //或者div.childNodes[0]
div.firstChild.nodeValue = "Some other message";
1裸诽、創(chuàng)建文本節(jié)點(diǎn)
- 使用document.createTextNode()創(chuàng)建新文本節(jié)點(diǎn)嫂用，這個(gè)方法接受一個(gè)參數(shù)——要插入節(jié)點(diǎn)
中的文本。
var textNode = document.createTextNode("<strong>Hello</strong> world!");
- 除非把新節(jié)點(diǎn)添加到文檔樹(shù)中已經(jīng)存在的節(jié)點(diǎn)中丈冬，否則我們不會(huì)在瀏覽器窗口中看到新節(jié)點(diǎn)嘱函。
//創(chuàng)建一個(gè)<div>元素并向其中添加一條消息。
var element = document.createElement("div");
element.className = "message";
var textNode = document.createTextNode("Hello world!");
element.appendChild(textNode);
document.body.appendChild(element);
2埂蕊、規(guī)范化文本節(jié)點(diǎn)
-
normalize()是能夠?qū)⑾噜徫谋竟?jié)點(diǎn)合并的方法 - 如果在一個(gè)包含兩個(gè)或多個(gè)文本節(jié)點(diǎn)的父元素上調(diào)用normalize()方法往弓，則會(huì)將所有文本節(jié)點(diǎn)合并成一個(gè)節(jié)點(diǎn)疏唾，結(jié)果節(jié)點(diǎn)的nodeValue等于將合并前每個(gè)文本節(jié)點(diǎn)的nodeValue值拼接起來(lái)的值。
var element = document.createElement("div");
element.className = "message";
var textNode = document.createTextNode("Hello world!");
element.appendChild(textNode);
var anotherTextNode = document.createTextNode("Yippee!");
element.appendChild(anotherTextNode);
document.body.appendChild(element);
alert(element.childNodes.length); //2
element.normalize();
alert(element.childNodes.length); //1
alert(element.firstChild.nodeValue); // "Hello world!Yippee!"
3函似、分割文本節(jié)點(diǎn)
-
splitText()方法會(huì)將一個(gè)文本節(jié)點(diǎn)分成兩個(gè)文本節(jié)點(diǎn)槐脏，即按照指定的位置分割nodeValue 值。 - 原來(lái)的文本節(jié)點(diǎn)將包含從開(kāi)始到指定位置之前的內(nèi)容撇寞，新文本節(jié)點(diǎn)將包含剩下的文本顿天。這個(gè)方法會(huì)返回一個(gè)新文本節(jié)點(diǎn)，該節(jié)點(diǎn)與原節(jié)點(diǎn)的parentNode 相同蔑担。
var element = document.createElement("div");
element.className = "message";
var textNode = document.createTextNode("Hello world!");
element.appendChild(textNode);
document.body.appendChild(element);
var newNode = element.firstChild.splitText(5);
alert(element.firstChild.nodeValue); //"Hello"
alert(newNode.nodeValue); //" world!"
alert(element.childNodes.length); //2
- 分割文本節(jié)點(diǎn)是從文本節(jié)點(diǎn)中提取數(shù)據(jù)的一種常用DOM 解析技術(shù)牌废。
Comment類型
-
注釋在DOM中是通過(guò)Comment 類型來(lái)表示的。Comment 節(jié)點(diǎn)具有下列特征：
- nodeType 的值為8啤握；
- nodeName 的值為"#comment"鸟缕；
- nodeValue 的值是注釋的內(nèi)容；
- parentNode 可能是Document 或Element排抬；
- 不支持（沒(méi)有）子節(jié)點(diǎn)叁扫。
Comment 類型與Text 類型繼承自相同的基類，因此它擁有除splitText()之外的所有字符串操作方法畜埋。
可以通過(guò)nodeValue 或data屬性來(lái)取得注釋的內(nèi)容。注釋節(jié)點(diǎn)可以通過(guò)其父節(jié)點(diǎn)來(lái)訪問(wèn)畴蒲。
<div id="myDiv"><!--A comment --></div>
var div = document.getElementById("myDiv");
var comment = div.firstChild;
alert(comment.data); //"A comment"
- 使用document.createComment()并為其傳遞注釋文本也可以創(chuàng)建注釋節(jié)點(diǎn)悠鞍。
var comment = document.createComment("A comment ");
-如果要訪問(wèn)注釋節(jié)點(diǎn)，一定要保證它們是<html>元素的后代模燥。
好好學(xué)習(xí)
