主页 > 专题教程 > javascript > js基础 >
来源:自学PHP网 时间:2018-02-08 10:24 作者: 阅读:次
[导读] 文本节点由Text类型来表示,它包含的是可以照字面解释的纯文本内容。纯文本中可以包含转义的HTML字符,但不能包含HTML代码。...
文本节点由Text类型来表示,它包含的是可以照字面解释的纯文本内容。纯文本中可以包含转义的HTML字符,但不能包含HTML代码。Text节点具有以下特征:
可以通过nodeValue属性或data属性来访问Text节点包含的文本,这两个属性中包含的值相同。对nodeValue的修改也会通过data属性反应出来,反之亦然。使用下面的方法可以操作节点中的文本:
除了以上方法之外,Text节点还有一个 在默认的情况下,每个可以包含内容的元素最多只能有一个文本节点,而且必须有内容存在。例如: <!-- 没有内容,也就没有文本节点 --> <div></div> <!-- 带有一个空格,所以有一个文本节点 --> <div> </div> <!-- 有文本内容,所以有一个文本节点 --> <div>jQuery之家</div> 上面的例子中,第一个 要访问文本子节点,可以使用下面的方法: var textNode = div.firstChild; //或者div.childNodes[0] 在取得文本节点的引用之后,就可以像下面的样子来修改它了: div.firstChild.nodeValue = "new string"; 如果这个节点当前存在于文档树中,那么修改文本节点的结构会立刻得到反映。另外,在修改文本节点的时候需要注意,此时的字符串会经过HTML(或XML)编码。也就是说,大于号、小于号或引号都会被转义,例如: div.firstChild.nodeValue = "new <strong>string</strong>"; 上面的代码会将文本输出为: 所有的浏览器都可以通过js脚本来访问Text类型的构造函数和原型,包括IE8及以上的浏览器。 我们可以使用 var textNode = document.createTextNode("<strong>hello</strong> world"); 在创建新的文本节点的同时,也会设置其 var element = document.createElement("div"); element.className = "message"; var textNode = document.createTextNode("hello world"); element.appendChild(textNode); document.body.appendChild(element); 一般情况下,每一个元素只有一个文本节点。不过在某些情况下也可能包含多个文本节点,例如: var element = document.createElement("div"); element.className = "message"; var textNode = document.createTextNode("hello world"); element.appendChild(textNode); var otherNode = document.createTextNode("javascript"); element.appendChild(otherNode); document.body.appendChild(element); 如果两个文本节点是相邻的兄弟节点,那么这两个节点就会连起来显示,中间不会有空格。 DOM文档中存在相邻的兄弟文本节点很容易会导致混乱,因为会分不清哪个文本节点代表哪个字符串。另外,DOM文档中出现相邻的相邻兄弟节点的情况也十分普遍,这就使得我们必须有一个方法来将相邻的文本节点进行合并。这个方法是由Node类型定义的 如果在一个包含两个或多个文本节点的元素上调用 var element = document.createElement("div"); element.className = "message"; var textNode = document.createTextNode("hello world!"); element.appendChild(textNode); var otherNode = document.createTextNode("javascript"); element.appendChild(otherNode); document.body.appendChild(element); console.info(element.childNodes.length); //值为2 element.normalize(); console.info(element.childNodes.length); //值为1 console.info(element.firstChild.nodeValue); //hello world!javascript 浏览器在解析文本的时候永远不会创建相邻的文本节点,这只会在我们操纵DOM时产生。 Text类型还提供了一个作用与 var element = document.createElement("div"); element.className = "message"; var textNode = document.createTextNode("hello world!"); element.appendChild(textNode); var otherNode = document.createTextNode("javascript"); element.appendChild(otherNode); document.body.appendChild(element); var newNode = element.firstChild.splitText(5); console.info(element.firstChild.nodeValue); // "hello" console.info(newNode.nodeValue); // " world!" console.info(element.childNodes.length); //2 上面的例子中,包含"hello world!"的文本节点被分割为两个文本节点,分割点从第五个字符开始。位置5是字符"hello"和"wolrd!"之间的空格,因此,原来的文本将包含字符"hello",而新文本将包含字符" wolrd!"(包含空格)。 |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com