<div>hello world!</div> <div>hello world!</div> <script type="text/javascript"> var oTestData = document.getElementById('testData'); //第一个和最后一个都是空白文本节点 console.log(oTestData.firstChild);//"hello world!" console.log(typeof oTestData.firstChild);//object console.log(oTestData.childNodes.length); //1 console.log(oTestData.firstChild.nodeValue);//"hello world!" console.log(typeof oTestData.firstChild.nodeValue);//string console.log(oTestData.firstChild.data);//"hello world!" //文本节点的data属性与nodeValue属性相同,都是 string 类型 console.log(oTestData.firstChild.data === oTestData.firstChild.nodeValue);//true var oTestWholeText = document.getElementById('testWholeText'); console.log(oTestWholeText.childNodes); //[text] console.log(oTestWholeText.childNodes.length); //1 console.log(oTestWholeText.firstChild.wholeText);//hello world! console.log(oTestWholeText.firstChild.data);//hello world! oTestWholeText.firstChild.splitText('or'); console.log(oTestWholeText.childNodes); //[text, text] console.log(oTestWholeText.childNodes.length); //2 console.log(oTestWholeText.firstChild);//#text console.log(oTestWholeText.firstChild.wholeText);//hello world! //wholeText属性将当前Text节点与毗邻的Text节点，作为一个整体返回。 console.log(oTestData.firstChild.length);//12 console.log(oTestData.firstChild.nodeValue.length);//12 console.log(oTestData.firstChild.data.length);//12 </script>
文本节点方法：
文本节点的操作与字符串的操作方法相当类似。一般地，我们获取文本都用 innerHTML，然后再去字符串的操作方法去操作。
document.createTextNode(text); 方法用于创建文本节点，这个方法接收一个参数，要插入节点中的文本；插入的是文本，就算写的是标签，也是当做文本来插入的；
splitText(index) 方法将一个文本节点分成两个文本节点，即按照 index 指定的位置分割 nodeValue 值。原来的文本节点将包含从开始到指定位置之前的内容。这个方法会返回一个新文本节点，包含剩下的文本；
appendData(text) 方法将 text 添加到节点的末尾，该方法无返回值；
deleteData(index,count) 方法从 index指定的位置开始删除 count 个字符，无返回值；
insertData(index,text) 方法在 index 指定的位置插入 text，无返回值；
replaceData(index,count,text) 方法用 text 替换从 index 指定位置开始到 index+count 为止的文本，无返回值；
substringData(index,count) 方法提取从 index 指定的位置开始到 offset+count 为止处的字符串，并返回该字符串。原来的文本节点无变化；
以上所述是小编给大家介绍的jacascript DOM节点——元素节点、属性节点、文本节点，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: