javascript Text类型

Posted on by mannuan One min read
  1. nodeType为3, nodeName为#text;
  2. 不支持子节点；
  3. 可以包含转义的HTML字符；
  4. 文本节点的值可以通过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>

  1. 操作文本节点的方法

  2. 默认情况下。每个包含内容的元素最多只能有一个文本节点，而且必须有内容存在；

  3. 创建和修改文本节点时，字符串会经过HTML（或XML）编码转义，防止对原文档造成解析错误；

div.firstChild.nodeValue = "<p>Hello world!</p>"; // "&lt;p&gt;Hello world!&lt;/p&gt;"

创建文本节点

  1. document.createTextNode();
  2. 可以人为使一个元素包含多个文本节点，虽然多个文本节点的表现形式与单个节点的表现形式没什么两样；
<!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>

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