你的位置:首页 > Java教程

[Java教程]DOM文本节点TEXT


定义

  文本节点由Text类型表示,包含的是纯文本内容,纯文本内容中的HTML字符会被转义。

 

特征 

  nodeType:3
  nodeName:#text
  nodeValue:节点所包含的文本
  parentNode:Element节点
  childNode:没有子节点

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

  [注意]每个可以包含内容的元素最多只能有一个文本节点,而且必须确实有内容存在

    [a]<div></div>(没有内容,也就没有文本节点)

<div id="box"></div><script>var oBox = document.getElementById('box');var oTest = oBox.firstChild;console.log(oTest);//null</script>    [b]<div> </div>(有空格,因此有一个文本节点)  <div id="box"> </div><script>var oBox = document.getElementById('box');var oTest = oBox.firstChild;//IE8-浏览器为null,因为其不识别空白文本节点;其他浏览器为" "console.log(oTest);</script>

    [b]<div> </div>(有空格,因此有一个文本节点)

<div id="box"> </div><script>var oBox = document.getElementById('box');var oTest = oBox.firstChild;//IE8-浏览器为null,因为其不识别空白文本节点;其他浏览器为" "console.log(oTest);</script>

 

属性

【data】

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

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

 

【length】

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

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

 

方法

【createTextNode()】

  createTextNode()方法用于创建文本节点,这个方法接收一个参数——要插入节点中的文本。在创建新文本的同时,也会为其设置ownerDocument属性

<div id="box">123</div><script>var oBox = document.getElementById('box');var oText = document.createTextNode('hello world!');oBox.appendChild(oText);console.log(oBox.innerHTML);//123hello world!</script>

    [注意]一般情况下,每个元素只有一个文本节点,但在某些情况下也可能包含多个文本子节点。如果两个文本节点是相邻的同胞节点,那么这两个节点中的文本就会连起来显示,中间不会有空格。

<div id="box">123</div><script>var oBox = document.getElementById('box');var oText = document.createTextNode('hello world!');oBox.appendChild(oText);console.log(oBox.innerHTML);//123hello world!var oText2 = document.createTextNode('<text2>');oBox.appendChild(oText2);console.log(oBox.innerHTML);//123hello world!&lt;text&gt;console.log(oBox.childNodes.length)//3</script>

 

【normalize()】

  normalize()方法将包含两个或多个文本节点的父元素中的文本节点合并成一个。
  [注意]IE9+浏览器无法正常使用该方法,返回的结果是所有的文本节点减1

<div id="box">123</div><script>var oBox = document.getElementById('box');var oText1 = document.createTextNode('1');oBox.appendChild(oText1);var oText2 = document.createTextNode('2');oBox.appendChild(oText2);var oText3 = document.createTextNode('3');oBox.appendChild(oText3);console.log(oBox.childNodes.length)//4oBox.normalize();console.log(oBox.innerHTML);//123123//IE9+浏览器返回3,使用该方法时只能将所有的文本节点减1;其他浏览器正常,返回1console.log(oBox.childNodes.length)</script>

 

【splitText()】

  splitText()方法将一个文本节点分成两个文本节点,即按照指定的位置分割nodeValue值。原来的文本节点将包含从开始到指定位置之前的内容,新文本节点将包含剩下的文本。这个方法会返回一个新文本节点,该节点与原节点的parentNode相同。分割文本节点是从文本节点中提取数据的常用DOM解析技术。

<div id="box">123</div><script>var oBox = document.getElementById('box');var newNode = oBox.firstChild.splitText(1);console.log(newNode);//23console.log(oBox.firstChild);//1console.log(oBox.lastChild);//23</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'));//undefinedconsole.log(oText.data);//1234console.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));//undefinedconsole.log(oText.data);//3console.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'));//undefinedconsole.log(oText.data);//1test23console.log(oBox.childNodes.length);//1</script>

 

【replaceData()】

  replaceData(offset,count,text)方法用text替换从offset指定的位置开始到offset+count处为止处的文本

<div id="box">123</div><script>var oBox = document.getElementById('box');var oText = oBox.firstChild;console.log(oText.replaceData(1,1,"test"));//undefinedconsole.log(oText.data);//1test3console.log(oBox.childNodes.length);//1</script>

 

【substringData()】

  substringData(offset,count)方法提取从offset指定的位置开始到offset+count为止处的字符串

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