【javascript】DOM-节点层次-Text类型&Comment类型

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 为止处的字符串。

 

Hello World!

var textNode = div.firstChild; //或者div.childNodes[0]
div.firstChild.nodeValue = "Some other message";

1、创建文本节点

• 使用document.createTextNode()创建新文本节点，这个方法接受一个参数——要插入节点
  中的文本。

var textNode = document.createTextNode("Hello world!");

• 除非把新节点添加到文档树中已经存在的节点中，否则我们不会在浏览器窗口中看到新节点。

//创建一个
元素并向其中添加一条消息。
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属性来取得注释的内容。注释节点可以通过其父节点来访问。

var div = document.getElementById("myDiv");
var comment = div.firstChild;
alert(comment.data); //"A comment"

• 使用document.createComment()并为其传递注释文本也可以创建注释节点。

var comment = document.createComment("A comment ");

-如果要访问注释节点，一定要保证它们是元素的后代。

好好学习