0

0

JavaScript文档对象模型-Text类型

黄舟

黄舟

发布时间:2017-01-20 14:36:39

|

2017人浏览过

|

来源于php中文网

原创

文本节点由text类型来表示,它包含的是可以照字面解释的纯文本内容。纯文本中可以包含转义的html字符,但不能包含html代码。text节点具有以下特征:

  • nodeType的值为3。

  • nodeName的值为“#text”。

  • nodeValue的值为节点所包含的文本。

  • parentNode是一个Element。

    立即学习Java免费学习笔记(深入)”;

它的没有子节点。

可以通过nodeValue属性或data属性来访问Text节点包含的文本,这两个属性中包含的值相同。对nodeValue的修改也会通过data属性反应出来,反之亦然。使用下面的方法可以操作节点中的文本:

  • appendData(text):将text添加到节点的末尾。

  • deleteData(offset,count):从offset开始的位置删除count个字符。

  • insertData(offset,text):从offset指定的位置插入text。

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

  • splitText(offset):从offset指定的位置将当前文本节点分成两个文本节点。

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

除了以上方法之外,Text节点还有一个length属性,保存着节点中字符的个数。而且nodeValue.length和data.length中也保存着相同的值。

在默认的情况下,每个可以包含内容的元素最多只能有一个文本节点,而且必须有内容存在。例如:


jQuery之家

上面的例子中,第一个

Maven 使用指南 中文WORD版
Maven 使用指南 中文WORD版

本文档主要讲述的是Maven 使用指南;Apache Maven,是一个软件(特别是Java软件)项目管理及自动构建工具,由Apache软件基金会所提供。基于项目对象模型(缩写:POM)概念,Maven利用一个中央信息片断能管理一个项目的构建、报告和文档等步骤。希望本文档会给有需要的朋友带来帮助;感兴趣的朋友可以过来看看

下载
中没有内容,所以它没有文本节点。在开始与结束标签之间只要存在内容,就有文本节点,所以虽然第二个
只包含一个空格,但它也有一个文本节点。该文本节点的nodeValue值就是一个空格。第三个
带有一个文本,它有一个文本节点,值为“jQuery之家”。

要访问文本子节点,可以使用下面的方法:

var textNode = div.firstChild;    //或者div.childNodes[0]

在取得文本节点的引用之后,就可以像下面的样子来修改它了:

div.firstChild.nodeValue = "new string";

如果这个节点当前存在于文档树中,那么修改文本节点的结构会立刻得到反映。另外,在修改文本节点的时候需要注意,此时的字符串会经过HTML(或XML)编码。也就是说,大于号、小于号或引号都会被转义,例如:

div.firstChild.nodeValue = "new string";

上面的代码会将文本输出为:new zuojiankuohaophpcnstrongyoujiankuohaophpcnstringzuojiankuohaophpcn/strongyoujiankuohaophpcn,在经过浏览器解析之后,呈现的文本为:new string

所有的浏览器都可以通过js脚本来访问Text类型的构造函数和原型,包括IE8及以上的浏览器。

 创建文本节点

我们可以使用document.createTextNode()方法来创建新的文本节点,这个方法接收一个参数:要插入节点中的文本。与设置已有的文本值一样,作为参数的文本也将按照HTML或XML的格式进行编码:

var textNode = document.createTextNode("hello world");

在创建新的文本节点的同时,也会设置其ownerDocument属性。但是,只有当你把新的节点添加到文档中已存在的节点时,才能在浏览器中看到它。下面的代码创建一个

元素,并在它里面添加一条信息:
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类型定义的normalize()方法。

如果在一个包含两个或多个文本节点的元素上调用normalize()方法,则会将所有的文本节点合并为一个节点。结构节点的nodeValue等于合并前每个文本节点的nodeValue值相加起来。例如下面的例子:

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类型还提供了一个作用与normalize()方法相反的方法:splitText()。这个方法会将一个文本节点分割成两个文本节点,即按照指定的位置分割nodeValue值。原来的文本节点将包含从开始位置到指定位置之前的内容,新文本节点将包含剩下的文本内容。这个方法会返回一个新文本节点,该节点与原来节点的parentNode相同。例如下面的例子:

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!"(包含空格)。

以上就是JavaScript文档对象模型-Text类型的内容,更多相关内容请关注PHP中文网(www.php.cn)!

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
go语言 注释编码
go语言 注释编码

本专题整合了go语言注释、注释规范等等内容,阅读专题下面的文章了解更多详细内容。

2

2026.01.31

go语言 math包
go语言 math包

本专题整合了go语言math包相关内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

go语言输入函数
go语言输入函数

本专题整合了go语言输入相关教程内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

golang 循环遍历
golang 循环遍历

本专题整合了golang循环遍历相关教程,阅读专题下面的文章了解更多详细内容。

0

2026.01.31

Golang人工智能合集
Golang人工智能合集

本专题整合了Golang人工智能相关内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

2026赚钱平台入口大全
2026赚钱平台入口大全

2026年最新赚钱平台入口汇总,涵盖任务众包、内容创作、电商运营、技能变现等多类正规渠道,助你轻松开启副业增收之路。阅读专题下面的文章了解更多详细内容。

76

2026.01.31

高干文在线阅读网站大全
高干文在线阅读网站大全

汇集热门1v1高干文免费阅读资源,涵盖都市言情、京味大院、军旅高干等经典题材,情节紧凑、人物鲜明。阅读专题下面的文章了解更多详细内容。

73

2026.01.31

无需付费的漫画app大全
无需付费的漫画app大全

想找真正免费又无套路的漫画App?本合集精选多款永久免费、资源丰富、无广告干扰的优质漫画应用,涵盖国漫、日漫、韩漫及经典老番,满足各类阅读需求。阅读专题下面的文章了解更多详细内容。

67

2026.01.31

漫画免费在线观看地址大全
漫画免费在线观看地址大全

想找免费又资源丰富的漫画网站?本合集精选2025-2026年热门平台,涵盖国漫、日漫、韩漫等多类型作品,支持高清流畅阅读与离线缓存。阅读专题下面的文章了解更多详细内容。

19

2026.01.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4.4万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.6万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号