javascript Text类型_#text-CSDN博客

本文链接：https://blog.csdn.net/wujunlei1595848/article/details/90677845

本文介绍了JavaScript中处理文本节点的基本方法，包括如何创建、规范化和分隔文本节点。通过nodeValue和data属性访问文本节点的值，使用normalize()方法合并元素内的多个文本节点，以及利用splitText()方法进行文本节点的分割操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>"; // "&lt;p&gt;Hello world!&lt;/p&gt;"
```

创建文本节点

document.createTextNode();

可以人为使一个元素包含多个文本节点，虽然多个文本节点的表现形式与单个节点的表现形式没什么两样；

<!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>

这个方法一般用于从文本节点提取数据