javascript Text类型

时间:2024-11-18 09:16:10
  1. nodeType为3, nodeName为#text;
  2. 不支持子节点;
  3. 可以包含转义的HTML字符;
  4. 文本节点的值可以通过nodeValue属性或data属性访问;
    1. <!DOCTYPE html>
    2. <html>
    3. <body>
    4. <div id="123" style="height: 20px;">123</div>
    5. </body>
    6. <script>
    7. var text = document.createTextNode("Hello world!");
    8. console.log(text.nodeType); // 输出:3
    9. console.log(text.nodeName); // 输出:#text
    10. console.log(text.nodeValue); // 输出:Hello world!
    11. console.log(text.data); // 输出:Hello world!
    12. console.log(text.nodeValue.length); // 输出:12
    13. console.log(text.data.length); // 输出:12
    14. </script>
    15. </html>

     

  5. 操作文本节点的方法

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

  7. 创建和修改文本节点时,字符串会经过HTML(或XML)编码转义,防止对原文档造成解析错误;

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

     

创建文本节点

  1. ();
  2. 可以人为使一个元素包含多个文本节点,虽然多个文本节点的表现形式与单个节点的表现形式没什么两样;
    1. <!DOCTYPE html>
    2. <html>
    3. <body>
    4. <div id="123" style="height: 20px;">123</div>
    5. </body>
    6. <script>
    7. var element = document.createElement('div');
    8. element.className = 'message';
    9. var textNode = document.createTextNode('Hello world!');
    10. element.appendChild(textNode);
    11. var anotherTextNode = document.createTextNode('Yippee!');
    12. element.appendChild(anotherTextNode);
    13. document.body.appendChild(element);
    14. </script>
    15. </html>

     

规范化文本节点

元素节点的方法:element.normalize()方法用于合并元素内的多个文本节点

分隔文本节点

Text类型的splitText()方法接收一个参数:分割的位置索引,将一个文本节点分为两个,同时返回后一个新文本节点;

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <div id="123" style="height: 20px;">123</div>
  5. </body>
  6. <script>
  7. var element = document.createElement('div');
  8. element.className = 'message';
  9. var textNode = document.createTextNode('Hello world!');
  10. var newNode = textNode.splitText(5);
  11. element.appendChild(textNode);
  12. element.appendChild(newNode);
  13. document.body.appendChild(element);
  14. document.body.appendChild();
  15. </script>
  16. </html>

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