解读HTML与JavaScript在网页中的应用-优快云博客

Text类型

length 返回长度
data 内容
appendData(文本) 追加文本
deleteData(位置,个数) 从哪里开始删除几个
insertData(位置,文本) 在哪个位置之前插入新文本
replaceData(位置，个数，文本)
从哪个位置开始替换几个。
splitText(位置)
将一个文本拆成两个文本
substringData(位置,个数)
截取
document.createTextNode(‘文本’)
创建文本节点
Comment
注释节点

document创建的一些方法
createElement(‘标签名’)
createAttribute(‘属性名’);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Text</title>
    <script>
        window.onload = function(){
            var text = document.body.childNodes[0];
            console.log(text);//#text "致我们的青春"
            // 获取节点数据  nodeValue  
            console.log(text.data);//致我们的青春

            // 数据的长度
            console.log(text.length);//6

            // 追加
             text.appendData(",青春不散场");//致我们的青春,青春不散场
             // 插入数据
             text.insertData(3,'终将逝去');//致我们终将逝去的青春,青春不散场
            // 替换节点  位置，个数，新文本
            text.replaceData(1,3,'你的');//致你的将逝去的青春,青春不散场
            // 截取内容  位置，个数
            var result = text.substringData(7,2);
            console.log(result);//青春
            console.log(document.body.childNodes);

             // 拆分节点
            text.splitText(9);
            console.log(document.body.childNodes);//从逗号一分为二

            // 创建一个文本节点
             var temp = document.createTextNode('我是的新文本节点');//致你的将逝去的青春,青春不散场我是的新文本节点
             // 追加body上
             document.body.appendChild(temp);
             console.log(document.body.childNodes);
        }
    </script>
</head>
<body>致我们的青春</body></html>