欢迎光临
我们一直在努力

JavaScript | 文本节点Text常用方法

文章目录

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

特征

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

<div id="box">内容</div>
<script>
    console.log(box.firstChild);//"内容"
    console.log(typeof box.firstChild);//'object'
</script>

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

<div id="box">&lt;内容&gt;</div>
<script>
    console.log(box.firstChild);//"<内容>""
</script>

文本节点具有三个node属性

  • nodeType === 3
  • nodeName === '#text'
  • nodeValue —— 节点所包含的文本

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

<div id="box">test</div>
<script>
var oTxt = box.firstChild;
console.log(oTxt.nodeType);//3
console.log(oTxt.nodeValue);//test
console.log(oTxt.nodeName);//'#text'
console.log(oTxt.parentNode);//<div>
console.log(oTxt.childNodes);//[]
</script>

空白文本节点

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

<div id="box">
    <div>1</div>
</div>
<script>
//标准浏览器输出[text, div, text],text表示空白文本节点
//IE8-浏览器输出[div],并不包含空白文本节点
console.log(box.childNodes);    
</script>

属性

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

<div id="box">test</div>
<script>
var oBox = document.getElementById('box');
var oTest = oBox.firstChild;
//test test true
console.log(oTest.nodeValue,oTest.data,oTest.data === oTest.nodeValue);
</script>

wholeText

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

<div id="test">123</div>
<script>
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
</script>

length

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

<div id="box">test</div>
<script>
var oBox = document.getElementById('box');
var oTest = oBox.firstChild;
//4 4 4
console.log(oTest.length,oTest.nodeValue.length,oTest.data.length);
</script>

方法

createTextNode()

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

<div id='box'>123<div>
<script>
var oBox = document.getElementById('box');
var oText = document.createTextNode('<strong>hello</strong> world!');
oBox.appendChild(oText);
//'123&lt;strong&gt;hello&lt;/strong&gt; world!'
console.log(oBox.innerHTML);
//此时,页面中有两个文本节点
console.log(oBox.childNodes.length);
</script>

normalize()

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

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

<div id="box">0</div>
<script>
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
</script>

splitText()

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

<div id="box">123</div>
<script>
var oBox = document.getElementById('box');
var newNode = oBox.firstChild.splitText(1);
console.log(newNode,newNode === oBox.lastChild);//'23' true
console.log(oBox.firstChild);//'1'
</script>

appendData()

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

<div id="box">123</div>
<script>
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
</script>

deleteData()

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

<div id="box">123</div>
<script>
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
</script>

insertData()

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

<div id="box">123</div>
<script>
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
</script>

replaceData()

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

<div id="box">123</div>
<script>
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
</script>

substringData()

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

<div class="box" id="box">123</div>
<script>
var oBox = document.getElementById('box');
var oText = oBox.firstChild;
console.log(oText.substringData(1,1));//'2'
console.log(oText);//'123'
</script>

性能问题

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

赞(1) 打赏
未经允许不得转载:散人研 » JavaScript | 文本节点Text常用方法
分享到: 更多 (0)

评论 抢沙发

8 + 1 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏