Text类型
文本节点由Text 类型表示，包含的是可以照字面解释的纯文本内容。纯文本中可以包含转义后的HTML 字符，但不能包含HTML 代码。
-
Text 节点具有以下特征：
- nodeType 的值为3；
- nodeName 的值为"#text"；
- nodeValue 的值为节点所包含的文本；
- parentNode 是一个Element；
- 不支持（没有）子节点。
可以通过nodeValue 属性或data属性访问Text节点中包含的文本，这两个属性中包含的值相同。
-
使用下列方法可以操作节点中的文本。
-
appendData(text)：将text 添加到节点的末尾。 -
deleteData(offset, count)：从offset 指定的位置开始删除count 个字符。 -
insertData(offset, text)：在offset 指定的位置插入text。 -
replaceData(offset,count,text)：用text替换从offset指定的位置开始到offset+count 为止处的文本。 -
splitText(offset)：从offset 指定的位置将当前文本节点分成两个文本节点。 -
substringData(offset, count)：提取从offset 指定的位置开始到offset+count 为止处的字符串。
-
<!-- 没有内容，也就没有文本节点 -->
<div></div>
<!-- 有空格，因而有一个文本节点 -->
<div> </div>
<!-- 有内容，因而有一个文本节点-->
<div>Hello World!</div>
var textNode = div.firstChild; //或者div.childNodes[0]
div.firstChild.nodeValue = "Some other message";
1、创建文本节点
- 使用document.createTextNode()创建新文本节点，这个方法接受一个参数——要插入节点
中的文本。
var textNode = document.createTextNode("<strong>Hello</strong> world!");
- 除非把新节点添加到文档树中已经存在的节点中，否则我们不会在浏览器窗口中看到新节点。
//创建一个<div>元素并向其中添加一条消息。
var element = document.createElement("div");
element.className = "message";
var textNode = document.createTextNode("Hello world!");
element.appendChild(textNode);
document.body.appendChild(element);
2、规范化文本节点
-
normalize()是能够将相邻文本节点合并的方法 - 如果在一个包含两个或多个文本节点的父元素上调用normalize()方法，则会将所有文本节点合并成一个节点，结果节点的nodeValue等于将合并前每个文本节点的nodeValue值拼接起来的值。
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、分割文本节点
-
splitText()方法会将一个文本节点分成两个文本节点，即按照指定的位置分割nodeValue 值。 - 原来的文本节点将包含从开始到指定位置之前的内容，新文本节点将包含剩下的文本。这个方法会返回一个新文本节点，该节点与原节点的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
- 分割文本节点是从文本节点中提取数据的一种常用DOM 解析技术。
Comment类型
-
注释在DOM中是通过Comment 类型来表示的。Comment 节点具有下列特征：
- nodeType 的值为8；
- nodeName 的值为"#comment"；
- nodeValue 的值是注释的内容；
- parentNode 可能是Document 或Element；
- 不支持（没有）子节点。
Comment 类型与Text 类型继承自相同的基类，因此它拥有除splitText()之外的所有字符串操作方法。
可以通过nodeValue 或data属性来取得注释的内容。注释节点可以通过其父节点来访问。
<div id="myDiv"><!--A comment --></div>
var div = document.getElementById("myDiv");
var comment = div.firstChild;
alert(comment.data); //"A comment"
- 使用document.createComment()并为其传递注释文本也可以创建注释节点。
var comment = document.createComment("A comment ");
-如果要访问注释节点，一定要保证它们是<html>元素的后代。
好好学习
