本内容是《Web前端开发之Javascript视频》的课件，请配合大师哥《Javascript》视频课程学习。

文本节点用Text类型表示，包含的是可以按字面解释的纯文本内容；纯文本内容可以包含转义后的HTML字符，但不能包含HTML代码；

Text类和Comment类都是CharacterData类的子类型；

CharacterData是一个抽象类（接口），代表 Node 对象包含的字符，它是在其他接口中被实现的，如Text、Comment 或 ProcessingInstruction具体的类；

CharacterData类继承自Node类，其拥有data、length、nextElementSibling、previousElementSibling等属性；

拥有的方法：appendData()、deleteData()、insertData()、replaceData()、substringData()。

特征：

nodeType值为3；nodeName的值为”#text”；nodeValue的值为节点所包含的文本；parentNode是一个Element；没有子节点；

data属性：

可以通过nodeValue属性或data属性访问或设置Text节点包含的文本；

var h2 = document.getElementsByTagName("h2")[0];console.log(h2.childNodes);  // NodeList [text]var text = h2.childNodes[0];// var text = h2.firstChild;  // 也可以console.log(text);  // 零点程序员console.log(text.nodeType);  // 3console.log(text.nodeName);  // #textconsole.log(text.nodeValue);  // 零点程序员console.log(text.data);   // 零点程序员text.nodeValue = "zeronetwork";console.log(text.nodeValue);  // zeronetworkconsole.log(text.parentNode); // <h2>零点程序员</h2>

length属性：

保存节点中字符的数目，而且nodeValue.length和data.length中也保存着相同的值；

console.log(text.length);console.log(text.nodeValue.length);console.log(text.data.length);

在默认情况下，每个可以包含内容的元素最多只能有一个文本节点，而且必须确实有内容存在；

var h4 = document.getElementsByTagName("h4")[0];  // <h4></h4>  返回null  // <h4> </h4>  返回空白，也是文本节点  // <h4>zeronetwork</h4>  返回文本节点var text = h4.firstChild;console.log(text);

在修改文本字符串时，字符串会经过HTML编码，即小于号大于号或引号都会被转义；也就是说，在向DOM文档中插入文本之前，会先对其进行HTML编码；

text.nodeValue = "零点程序员<strong>王唯</strong>";// 会转义为<strong>console.log(text.nodeValue);document.write(text.nodeValue);

注：浏览器已自动修正；如果使用document.write()方法，会解析为html代码；

后面我们会学到Element类型的innerHTML和innerText等方法，它们就是获取或设置元素内的HTML字符串或纯文本内容的；如：

var mydiv = document.getElementById("mydiv");console.log(mydiv.innerHTML)console.log(mydiv.innerText);

其中，innerText就是把div内的所有后代的元素的纯文本提取，并拼接起来；但我们不使用这个属性也可以达到这种效果；

// 返回元素的纯文本内容，递归进入其子元素function textContent(e){    var child, type, s = "";  // s保存所有子节点的文本    for(child = e.firstChild; child != null; child = child.nextSibling){        type = child.nodeType;        if(type == 3 || type == 4)  // Text和CDATASection节点            s += child.nodeValue;        else if(type == 1)  // Element            s += textContent(child);    }    return s;}var mydiv = document.getElementById("mydiv");console.log(mydiv.innerText);console.log(textContent(mydiv));

将Text节点中的内容转换成大写形式：

// 递归把e的后代节点中的所有Text节点内容转换成大写function upcase(e){    if(e.nodeType == 3 || e.nodeType == 4)        e.data = e.data.toUpperCase();    else        for(var i=0,len=e.childNodes.length;i<len; i++)            upcase(e.childNodes[i]);}var mydiv = document.getElementById("mydiv");upcase(mydiv);

创建文本节点：

document.createTextNode(data)方法：

创建一个新的文本节点；该方法接受一个文本参数；该文本也将按照HTML或XML的格式进行编码；在创建的同时，也会为其设置ownerDocument属性；也需要添加到文件树中；

注：不能直接为文本节点添加其他特性；

var textNode = document.createTextNode("零点程序员");document.body.appendChild(textNode);var div = document.createElement("div");div.className = "newsdiv";var textNode = document.createTextNode("zeronetwork");// textNode.setAttribute("style","color:red");  // 异常div.appendChild(textNode);var textNode = document.createTextNode("<strong>零点</strong>zeronetwork");var mydiv = document.getElementById("mydiv");mydiv.appendChild(textNode);console.log(mydiv.lastChild);  // <strong>零点</strong>zeronetwork，因为被编码了console.log(mydiv.lastChild.nodeType);  // 3，依然是Text_node

操作文本节点的方法：

normalize()方法：规范化文本节点；

默认情况下，每个元素只有一个文本节点，但如果该元素appendChild多个文本节点后，该元素就可能包含多个文本子节点；

var mydiv = document.getElementById("mydiv");mydiv.appendChild(document.createTextNode("零点程序员"));mydiv.appendChild(document.createTextNode("王唯"));mydiv.appendChild(document.createTextNode("Web前端开发"));// 此时查看渲染结果为："零点程序员" "王唯" "Web前端开发"console.log(mydiv.childNodes.length);  // 3console.log(mydiv.childNodes);  // NodeList(3)for(var i=0,len=mydiv.childNodes.length; i<len; i++)    console.log(mydiv.childNodes[i].nodeValue); // 零点程序员 王唯 Web前端开发

而这种在DOM中，存在相邻的同胞文本节点很容易导致混乱，因为分不清哪个文本节点表示哪个字符串，而在实际开发中，出现这种情况还比较多，于是出现了一个能够将相邻文本节点合并的方法normalize()；

该方法Node类型定义的，由父节点调用；

mydiv.normalize();console.log(mydiv.childNodes.length);  // 1for(var i=0,len=mydiv.childNodes.length; i<len; i++)    console.log(mydiv.childNodes[i].nodeValue); // 零点程序员王唯Web前端开发

normalize()方法规范里说：在一个"规范化"后的DOM树中，不存在一个空的文本节点，或者两个相邻的文本节点；这里的“空的文本节点”并不包括空白字符(空格，换行等)构成的文本节点；

splitText(offset)：

分割文本节点；Text类型提供了一个作用与normalize()相反的方法：splitText()；

该方法会将一个文本节点分成两个兄弟文本节点，即按照指定的offset位置分割nodeValue值；原来的文本节点将包含从开始到指定offset位置之前的内容，新文本节点将包含剩下的文本，并返回这个新文本节点，并且该节点与原节点的parentNode相同；

var div = document.createElement("div");div.className = "div";var textNode = document.createTextNode("zeronetwork");div.appendChild(textNode);document.body.appendChild(div);console.log(div.childNodes.length);  // 1var newNode = div.firstChild.splitText(4);console.log(div.firstChild.nodeValue);  // zeroconsole.log(newNode.nodeValue);  // networkconsole.log(div.childNodes.length);  // 2

如果指定的偏移量刚好等于原文本节点所包含字符串的长度，则返回一个内容为空的文本节点；

var fullNode = div.firstChild.splitText(div.firstChild.nodeValue.length);console.log(div.firstChild);console.log(fullNode.nodeValue);  // ""

分割后的文本节点还可以使用Node.normalize()方法来合并；分割文本节点是从文本节点中提取数据的一种常用DOM解析技术；

// 在一个文本中插入另一个节点var p = document.createElement("p");p.appendChild(document.createTextNode("零点程序员"));document.body.appendChild(p);var programmer = p.firstChild.splitText(2);var strongNode = document.createElement("strong");strongNode.appendChild(document.createTextNode("zeronetwork"));p.insertBefore(strongNode, programmer);

appendData(text)：将text添加到节点的末尾；

deleteData(offset, count)：从offset指定的位置开始删除count个字符；

insertData(offset, text)；在offset指定的位置插入text;

repalceData(offset, count, text)：用text从offset开始替换count个文本；如果count为0，就是在offset处插入text文本；

substringData(offset, count)：从offset位置开始提取count个文本；

<h1>零点程序员</h1><script>var h1 = document.getElementsByTagName("h1")[0];var txtNode = h1.firstChild;txtNode.appendData("zeronetwork");txtNode.deleteData(9, 3);txtNode.insertData(5, "王唯");txtNode.replaceData(2,3,"王唯");var result = txtNode.substringData(2,2);console.log(result);  // 王唯</script>

Comment类型：

在DOM中通过Comment类型来表示注释；

同Text类一样，Comment类也是继承自CharacterData，它本身没有定义属性和方法，因此它的属性和方法都是直接继承自CharacterData或间接继承自Node类；

特征为：

nodeType值为8；nodeName值为#cooment；nodeValue的值为注释内容；parentNode可能是Document或Element；没有子节点；

Comment类型与Text类型继承自相同的基类，因此它拥有除了splitText()之外的所有字符串操作方法；其访问方式同Text类型基本一样；也可以通过其父节点来访问，如：

var mydiv = document.getElementById("mydiv");console.log(mydiv.firstChild);console.log(mydiv.childNodes[0]);  // mydiv中第1个子元素是注释console.log(mydiv.childNodes[0].nodeType);  // 8console.log(mydiv.childNodes[0].nodeName);  // #commentconsole.log(mydiv.childNodes[0].nodeValue);  // 这是一段注释console.log(mydiv.childNodes[0].data);  // 这是一段注释console.log(mydiv.childNodes[0].parentNode);  // <div id="mydiv" ...

document.createComment(data)方法：创建注释节，参数data为注释文本；

var mydiv = document.getElementById("mydiv");var comment = document.createComment("创建注释节点");mydiv.appendChild(comment);

注：chrome浏览器不会识别位于</html>标签之后的注释，其它可以，因此如果要访问注释节点，一定要保证它们是<html>元素的后代；

<!-- html外的注释 --><script>var c = document.childNodes[2];console.log(c);  // FF输出为undefined，其余可以识别</script>

在实际开发中，已经直接在代码中注释了，所以很少会创建和访问注释节点；

CDATASection类型：

CDATASection类型只针对基于XML的文档，表示的是CDATA区域；该类继承自Text类型，其本身没有定义属性和方法，全部继承自祖先类，因此其拥有除了splitText()之外的所有字符串操作方法；

其特征：

nodeType的值为4；nodeName的值为#cdata-section；nodeValue的值为CDATA区域中的内容；parentNode可能为Document或Element；没有子节点；

在XML文档中，可以使用document.createCDataSection()来创建CDATA区域，只须为其传入节点的内容即可；

var cdata = document.createCDATASection("cdata"); // 异常，HTML文档不支持

示例：data.xml文件：

<persons>    <person>        <name>王唯</name>        <age>18</age>        <sex>男</sex>    </person>    <person>        <name>静静</name>        <age>22</age>        <sex>女</sex>    </person>    <![CDATA[        if a < b    ]]>    <person>        <name>娟娟</name>        <age>28</age>        <sex>女</sex>    </person></persons>

html文档：

function loadXMLDoc(fileName){    var xmlHttp;    if(window.ActiveXObject)        xmlHttp = ActiveXObject("Microsoft.XMLDOM");    else        xmlHttp = new window.XMLHttpRequest();    xmlHttp.open("GET",fileName,true);    xmlHttp.send(null);    xmlHttp.onreadystatechange = function(e){        if(xmlHttp.readyState == 4 && xmlHttp.status == 200){            var xmlDoc = xmlHttp.responseXML;            // console.log(xmlDoc);            parseXML(xmlDoc);        }    }}function parseXML(xmlDoc){    var persons = xmlDoc.documentElement;    // console.log(persons);    // console.log(persons.childNodes);    // var ps = persons.getElementsByTagName("person");    // console.log(ps);    // console.log(ps[0]);    // var name = ps[0].getElementsByTagName("name")[0];    // console.log(name.firstChild.nodeValue);    // 获取cdata节点    // var cdata = persons.childNodes[5];    // console.log(cdata);    // console.log(cdata.nodeType);  // 4    // console.log(cdata.nodeName);  // #cdata-section    // console.log(cdata.nodeValue);    // console.log(cdata.data);    // console.log(cdata.parentNode);    var newCDATA = xmlDoc.createCDATASection("这是CDATA数据");    persons.childNodes[3].appendChild(newCDATA);    console.log(persons.childNodes[3].childNodes);}loadXMLDoc("data.xml");

Web前端开发之Javascript-零点程序员-王唯