JavaScript Document Object Model-Text type
文本节点由Text类型来表示，它包含的是可以照字面解释的纯文本内容。纯文本中可以包含转义的HTML字符，但不能包含HTML代码。Text节点具有以下特征：
nodeType的值为3。
nodeName的值为“#text”。
nodeValue的值为节点所包含的文本。
parentNode是一个Element。
它的没有子节点。
可以通过nodeValue属性或data属性来访问Text节点包含的文本，这两个属性中包含的值相同。对nodeValue的修改也会通过data属性反应出来，反之亦然。使用下面的方法可以操作节点中的文本：
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为止处的字符串。
除了以上方法之外，Text节点还有一个length属性，保存着节点中字符的个数。而且nodeValue.length和data.length中也保存着相同的值。
在默认的情况下，每个可以包含内容的元素最多只能有一个文本节点，而且必须有内容存在。例如：
<!-- 没有内容，也就没有文本节点 --> <div></div> <!-- 带有一个空格，所以有一个文本节点 --> <div> </div> <!-- 有文本内容，所以有一个文本节点 --> <div>jQuery之家</div>
上面的例子中，第一个
要访问文本子节点，可以使用下面的方法：
var textNode = div.firstChild; //或者div.childNodes[0]
在取得文本节点的引用之后，就可以像下面的样子来修改它了：
div.firstChild.nodeValue = "new string";
如果这个节点当前存在于文档树中，那么修改文本节点的结构会立刻得到反映。另外，在修改文本节点的时候需要注意，此时的字符串会经过HTML（或XML）编码。也就是说，大于号、小于号或引号都会被转义，例如：
div.firstChild.nodeValue = "new <strong>string</strong>";
上面的代码会将文本输出为：new <strong>string</strong>，在经过浏览器解析之后，呈现的文本为：new string。
所有的浏览器都可以通过js脚本来访问Text类型的构造函数和原型，包括IE8及以上的浏览器。
创建文本节点
我们可以使用document.createTextNode()方法来创建新的文本节点，这个方法接收一个参数：要插入节点中的文本。与设置已有的文本值一样，作为参数的文本也将按照HTML或XML的格式进行编码：
var textNode = document.createTextNode("<strong>hello</strong> world");在创建新的文本节点的同时，也会设置其ownerDocument属性。但是，只有当你把新的节点添加到文档中已存在的节点时，才能在浏览器中看到它。下面的代码创建一个
var element = document.createElement("div");
element.className = "message";
var textNode = document.createTextNode("hello world");
element.appendChild(textNode);
document.body.appendChild(element);一般情况下，每一个元素只有一个文本节点。不过在某些情况下也可能包含多个文本节点，例如：
var element = document.createElement("div");
element.className = "message";
var textNode = document.createTextNode("hello world");
element.appendChild(textNode);
var otherNode = document.createTextNode("javascript");
element.appendChild(otherNode);
document.body.appendChild(element);如果两个文本节点是相邻的兄弟节点，那么这两个节点就会连起来显示，中间不会有空格。
合并文本节点
DOM文档中存在相邻的兄弟文本节点很容易会导致混乱，因为会分不清哪个文本节点代表哪个字符串。另外，DOM文档中出现相邻的相邻兄弟节点的情况也十分普遍，这就使得我们必须有一个方法来将相邻的文本节点进行合并。这个方法是由Node类型定义的normalize()方法。
如果在一个包含两个或多个文本节点的元素上调用normalize()方法，则会将所有的文本节点合并为一个节点。结构节点的nodeValue等于合并前每个文本节点的nodeValue值相加起来。例如下面的例子：
var element = document.createElement("div");
element.className = "message";
var textNode = document.createTextNode("hello world!");
element.appendChild(textNode);
var otherNode = document.createTextNode("javascript");
element.appendChild(otherNode);
document.body.appendChild(element);
console.info(element.childNodes.length); //值为2
element.normalize();
console.info(element.childNodes.length); //值为1
console.info(element.firstChild.nodeValue); //hello world!javascript浏览器在解析文本的时候永远不会创建相邻的文本节点，这只会在我们操纵DOM时产生。
分割文本节点
Text类型还提供了一个作用与normalize()方法相反的方法：splitText()。这个方法会将一个文本节点分割成两个文本节点，即按照指定的位置分割nodeValue值。原来的文本节点将包含从开始位置到指定位置之前的内容，新文本节点将包含剩下的文本内容。这个方法会返回一个新文本节点，该节点与原来节点的parentNode相同。例如下面的例子：
var element = document.createElement("div");
element.className = "message";
var textNode = document.createTextNode("hello world!");
element.appendChild(textNode);
var otherNode = document.createTextNode("javascript");
element.appendChild(otherNode);
document.body.appendChild(element);
var newNode = element.firstChild.splitText(5);
console.info(element.firstChild.nodeValue); // "hello"
console.info(newNode.nodeValue); // " world!"
console.info(element.childNodes.length); //2上面的例子中，包含"hello world!"的文本节点被分割为两个文本节点，分割点从第五个字符开始。位置5是字符"hello"和"wolrd!"之间的空格，因此，原来的文本将包含字符"hello"，而新文本将包含字符" wolrd!"（包含空格）。
以上就是JavaScript文档对象模型-Text类型的内容，更多相关内容请关注PHP中文网（www.php.cn）！
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to implement an online speech recognition system using WebSocket and JavaScript
Dec 17, 2023 pm 02:54 PM
How to use WebSocket and JavaScript to implement an online speech recognition system Introduction: With the continuous development of technology, speech recognition technology has become an important part of the field of artificial intelligence. The online speech recognition system based on WebSocket and JavaScript has the characteristics of low latency, real-time and cross-platform, and has become a widely used solution. This article will introduce how to use WebSocket and JavaScript to implement an online speech recognition system.
WebSocket and JavaScript: key technologies for implementing real-time monitoring systems
Dec 17, 2023 pm 05:30 PM
WebSocket and JavaScript: Key technologies for realizing real-time monitoring systems Introduction: With the rapid development of Internet technology, real-time monitoring systems have been widely used in various fields. One of the key technologies to achieve real-time monitoring is the combination of WebSocket and JavaScript. This article will introduce the application of WebSocket and JavaScript in real-time monitoring systems, give code examples, and explain their implementation principles in detail. 1. WebSocket technology
How to use JavaScript and WebSocket to implement a real-time online ordering system
Dec 17, 2023 pm 12:09 PM
Introduction to how to use JavaScript and WebSocket to implement a real-time online ordering system: With the popularity of the Internet and the advancement of technology, more and more restaurants have begun to provide online ordering services. In order to implement a real-time online ordering system, we can use JavaScript and WebSocket technology. WebSocket is a full-duplex communication protocol based on the TCP protocol, which can realize real-time two-way communication between the client and the server. In the real-time online ordering system, when the user selects dishes and places an order
How to implement an online reservation system using WebSocket and JavaScript
Dec 17, 2023 am 09:39 AM
How to use WebSocket and JavaScript to implement an online reservation system. In today's digital era, more and more businesses and services need to provide online reservation functions. It is crucial to implement an efficient and real-time online reservation system. This article will introduce how to use WebSocket and JavaScript to implement an online reservation system, and provide specific code examples. 1. What is WebSocket? WebSocket is a full-duplex method on a single TCP connection.
JavaScript and WebSocket: Building an efficient real-time weather forecasting system
Dec 17, 2023 pm 05:13 PM
JavaScript and WebSocket: Building an efficient real-time weather forecast system Introduction: Today, the accuracy of weather forecasts is of great significance to daily life and decision-making. As technology develops, we can provide more accurate and reliable weather forecasts by obtaining weather data in real time. In this article, we will learn how to use JavaScript and WebSocket technology to build an efficient real-time weather forecast system. This article will demonstrate the implementation process through specific code examples. We
Simple JavaScript Tutorial: How to Get HTTP Status Code
Jan 05, 2024 pm 06:08 PM
JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest
How to use insertBefore in javascript
Nov 24, 2023 am 11:56 AM
Usage: In JavaScript, the insertBefore() method is used to insert a new node in the DOM tree. This method requires two parameters: the new node to be inserted and the reference node (that is, the node where the new node will be inserted).
JavaScript and WebSocket: Building an efficient real-time image processing system
Dec 17, 2023 am 08:41 AM
JavaScript is a programming language widely used in web development, while WebSocket is a network protocol used for real-time communication. Combining the powerful functions of the two, we can create an efficient real-time image processing system. This article will introduce how to implement this system using JavaScript and WebSocket, and provide specific code examples. First, we need to clarify the requirements and goals of the real-time image processing system. Suppose we have a camera device that can collect real-time image data
