- nodeType为3, nodeName为#text;
- 不支持子节点;
- 可以包含转义的HTML字符;
- 文本节点的值可以通过nodeValue属性或data属性访问;
-
<!DOCTYPE html>
-
<html>
-
<body>
-
<div id="123" style="height: 20px;">123</div>
-
</body>
-
<script>
-
var text = document.createTextNode("Hello world!");
-
-
console.log(text.nodeType); // 输出:3
-
console.log(text.nodeName); // 输出:#text
-
console.log(text.nodeValue); // 输出:Hello world!
-
console.log(text.data); // 输出:Hello world!
-
console.log(text.nodeValue.length); // 输出:12
-
console.log(text.data.length); // 输出:12
-
</script>
-
</html>
-
-
操作文本节点的方法
-
默认情况下。每个包含内容的元素最多只能有一个文本节点,而且必须有内容存在;
-
创建和修改文本节点时,字符串会经过HTML(或XML)编码转义,防止对原文档造成解析错误;
div.firstChild.nodeValue = "<p>Hello world!</p>"; // "<p>Hello world!</p>"
创建文本节点
- ();
- 可以人为使一个元素包含多个文本节点,虽然多个文本节点的表现形式与单个节点的表现形式没什么两样;
-
<!DOCTYPE html>
-
<html>
-
<body>
-
<div id="123" style="height: 20px;">123</div>
-
</body>
-
<script>
-
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);
-
</script>
-
</html>
-
规范化文本节点
元素节点的方法:element.normalize()方法用于合并元素内的多个文本节点
分隔文本节点
Text类型的splitText()方法接收一个参数:分割的位置索引,将一个文本节点分为两个,同时返回后一个新文本节点;
-
<!DOCTYPE html>
-
<html>
-
<body>
-
<div id="123" style="height: 20px;">123</div>
-
</body>
-
<script>
-
var element = document.createElement('div');
-
element.className = 'message';
-
-
var textNode = document.createTextNode('Hello world!');
-
var newNode = textNode.splitText(5);
-
element.appendChild(textNode);
-
element.appendChild(newNode);
-
-
document.body.appendChild(element);
-
document.body.appendChild();
-
</script>
-
</html>
这个方法一般用于从文本节点提取数据