js中text方法是啥意识_JavaScript | 文本节点Text常用方法

文本节点就是指向文本的节点，网页上看到的文字内容都属于文本节点。

特征

文本节点由Text类型表示，包含的是纯文本内容，但文本节点是对象类型。

内容

console.log(box.firstChild);//"内容"

console.log(typeof box.firstChild);//'object'

纯文本内容中的HTML字符会进行转义，转义字符建议参考：HTML特殊符号编码

<内容>

console.log(box.firstChild);//"""

文本节点具有三个node属性

nodeType === 3

nodeName === '#text'

nodeValue —— 节点所包含的文本

注意：文本节点没有子节点

test

var oTxt = box.firstChild;

console.log(oTxt.nodeType);//3

console.log(oTxt.nodeValue);//test

console.log(oTxt.nodeName);//'#text'

console.log(oTxt.parentNode);//

console.log(oTxt.childNodes);//[]

空白文本节点

空白文本节点一般值代码中的回车键。IE8-浏览器不识别空白文本节点，而其他浏览器都会识别空白文本节点。

1

//标准浏览器输出[text, div, text]，text表示空白文本节点

//IE8-浏览器输出[div]，并不包含空白文本节点

console.log(box.childNodes);

属性

文本节点的data属性与nodeValue属性相同。

test

var oBox = document.getElementById('box');

var oTest = oBox.firstChild;

//test test true

console.log(oTest.nodeValue,oTest.data,oTest.data === oTest.nodeValue);

wholeText

wholeText属性将当前Text节点与毗邻的Text节点作为一个整体返回。大多数情况下，wholeText属性的返回值与date属性、textContent属性相同。但是某些特殊情况下会存在差异，另外IE8-不支持wholeText属性。

123

console.log(test.firstChild.wholeText);//123

console.log(test.firstChild.data);//123

//以索引1为指定位置分割为两个文本节点

test.firstChild.splitText(1);

console.log(test.firstChild.wholeText);//123

console.log(test.firstChild.data);//1

length

文本节点的length属性保存着节点字符的长度(数目)，而且nodeValue.length，data.length也保存着相同的值

test

var oBox = document.getElementById('box');

var oTest = oBox.firstChild;

//4 4 4

console.log(oTest.length,oTest.nodeValue.length,oTest.data.length);

方法

createTextNode()

createTextNode()方法用于创建文本节点，这个方法接收一个参数——要插入节点中的文本

123

var oBox = document.getElementById('box');

var oText = document.createTextNode('hello world!');

oBox.appendChild(oText);

//'123<strong>hello</strong> world!'

console.log(oBox.innerHTML);

//此时，页面中有两个文本节点

console.log(oBox.childNodes.length);

normalize()

normalize()方法用于合并相邻的文本节点，我们需要在TextNode的父节点(父元素)上调用

注意：IE9+使用可能出现异常

0

var oText1 = document.createTextNode('1');

var oText2 = document.createTextNode('2');

box.appendChild(oText1);

box.appendChild(oText2);

console.log(box.childNodes);//[text, text, text]

console.log(box.childNodes.length);//3

box.normalize();

//IE9+浏览器返回[text,text]，而其他浏览器返回[text]

console.log(box.childNodes);

//IE9+浏览器返回'01'，而其他浏览器返回'012'

console.log(box.childNodes[0]);

//IE9+浏览器返回2，使用该方法时只能将所有的文本节点减1；其他浏览器正常，返回1

console.log(box.childNodes.length);//1

splitText()

splitText()方法与normalize作用相反，该方法将一个文本节点分成两个文本节点，即按照指定的位置分割nodeValue值。原来的文本节点将包含从开始到指定位置之前的内容。这个方法会返回一个新的文本节点，包含剩下的文本内容。

123

var oBox = document.getElementById('box');

var newNode = oBox.firstChild.splitText(1);

console.log(newNode,newNode === oBox.lastChild);//'23' true

console.log(oBox.firstChild);//'1'

appendData()

appendData(text)方法将text添加到节点的末尾，该方法无返回值。

123

var oBox = document.getElementById('box');

var oText = oBox.firstChild;

console.log(oText.appendData('4'));//undefined

console.log(oText.data);//'1234'

console.log(oBox.childNodes.length);//1

deleteData()

deleteData(offset,count)方法从offset指定的位置开始删除count个字符，无返回值。

123

var oBox = document.getElementById('box');

var oText = oBox.firstChild;

console.log(oText.deleteData(0,2));//undefined

console.log(oText.data);//'3'

console.log(oBox.childNodes.length);//1

insertData()

insertData(offset,text)用于在offset指定位置插入text，无返回值。

123

var oBox = document.getElementById('box');

var oText = oBox.firstChild;

console.log(oText.insertData(1,'test'));//undefined

console.log(oText.data);//'1test23'

console.log(oBox.childNodes.length);//1

replaceData()

replaceData(offset,count,text)方法用于将text替换掉，从offset开始的count个文本，无返回值。

123

var oBox = document.getElementById('box');

var oText = oBox.firstChild;

console.log(oText.replaceData(1,1,"test"));//undefined

console.log(oText.data);//'1test3'

console.log(oBox.childNodes.length);//1

substringData()

subStringData(offset,count)方法提取从offset指定位置开始的count个字符串，并返回该字符串，原来的文本节点没有变化。

123

var oBox = document.getElementById('box');

var oText = oBox.firstChild;

console.log(oText.substringData(1,1));//'2'

console.log(oText);//'123'

性能问题

我们可以看到TextNode的方法与字符串方法非常类似，但是当我们操作TextNode节点时，一般建议使用TextNode的方法，这样有助于我们减少内存开销。