Javascript高级编程学习笔记（38）—— DOM（4）Text

Text类型

html页面中的纯文本内容就属于Text类型

纯文本内容可以包含转义后的html字符，但不能包括 html 代码

 

text类型具有以下属性、方法

 

nodeType：3

nodeName：'#text'

nodeValue：值为节点所包含的文本节点

parentNode：Element节点

childNodes：不支持子节点

data：值与nodeValue一致

length：保存节点中的文字数目与data.value、nodeValue.length一致

appendData（text）：将text添加到当前文本节点的末尾

deleteData（offset，count）：从offset指定的位置开始，删除count个字符

insertData（offset，text）：在offset指定的位置插入text

replaceData（offset，count，text）：用text替换从offset处开始的count个字符

splitText（offset）：从offset处将当前文本节点分为两个新的文本节点

substringData（offset，count）：提取offset处开始的count个字符

 

默认情况下，每个可以包含内容的元素最多只能有一个文本节点

只要元素起止标签之间存在内容，就会生成一个文本节点

只要被修改的节点存在于文档树中，那么对文本节点的修改将会立即呈现在页面中

 

需要注意的是对文本节点插入的内容，会被html、XML编码，也就是说大于小于号等特殊的html字符都会被转义

所以通过text类型来操作页面上的文本，在一定程度上可以避免XSS（脚本注入）攻击

 

创建文本节点

使用 document.createTextNode() 创建文本节点

该方法接收一个参数：要插入节点中的文本

在创建时会让其 ownerDocument 属性指向调用createTextNode()方法的document对象

在创建文本节点后其内容并不会立即出现在页面中，我们需要将其插入文档树中才能显示

 

一般来说一个元素只有一个文本节点，但是当我们多次对其进行插入后就会有多个文本节点

需要注意的是，两个相邻的同级文本节点之间的内容显示并不会有空格，即它们的内容会连在一起显示

 

规范化文本节点

正是由于两个相邻的同级文本节点之间的内容会连在一起显示，所以会带来混乱，我们无法分辨到底这个字符串的那一部分属于前一个文本节点，而哪一个又属于后一个

所以为了解决这种情况，DOM提供了一个方法用于修复这种情况

这个方法由 Node 类型定义，所以所有的节点都存在该方法

其使用方式也很简单，我们只需要在拥有多个文本子节点的元素上调用该方法即可

element.normalize()

这样就可以合并这些不合逻辑的文本节点

 

需要注意的是，多个文本节点只有在我们进行DOM操作的时候才会产生

HTML在解析的时候是不会产生多个文本节点这样的情况的

PS. 在部分情况下在IE6中使用该方法会导致浏览器崩溃，IE7以上则不存在该问题

 

 

分割文本节点

Text类型提供了一个功能与 normalize 相反的方法，splitText（）

该方法会将一个文本节点从指定位置分成两个文本节点

原来的文本节点将包含指定位置之前的文本，新的文本节点将包含剩下的值

该方法返回这个新的文本节点，该节点已经添加到了文档中，parentNode与原来的文本节点一致，位置在原来的文本节点之后

 

这种方法常用于从文本节点中提取数据