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

2017-11-30 本文已影响5人 shanruopeng

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>元素的后代。

好好学习

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

猜你喜欢

热点阅读