从原型链看DOM--Text类型
文本节点由Text类型表示,包含的是可以按照字面解释的纯文本内容,纯文本中可以包含转义后的HTML字符但不能包含HTML代码。原型链继承关系为:textNode.__proto__->Text.prototype->CharacterData.prototype->Node.prototype->EventTarget.prototype->Object.prototype。
Text节点具有以下特征
- nodeType值为3
- nodeName值为"#text" ('string'类型)
- nodeValue的值为节点所包含的文本
- parentNode是一个Element
- 没有子节点
- 可以通过nodeValue(继承自Node.prototype)或data(继承自CharacterData.prototype)属性访问Text节点包含的文本。对nodeValue的修改也会通过data反映出来。反之亦然。
var text=document.createTextNode('文本');
text.nodeValue;// "文本"
text.data;// "文本"
使用下列方法操作节点中文本,操作会引起已经存在在文档中的文本节点发生变化。
(1).继承自CharacterData.prototype的
appendData(text):将text添加到节点的末尾。
var text=document.createTextNode('文本');
text.appendData('增');
text;// "文本增"
deleteData(offset,count):从offset指定位置开始删除count个字符。
text.deleteData(1,1);
text;// "文增"
insertData(offset,text):从offset指定位置插入text。
text.insertData(1,'本');
text;// "文本增"
replaceData(offset,count,text):用text替换从offset指定位置开始到到offset+count为止处的文本。也可以理解成用text替换从offset开始长度为count的文本。
text.replaceData(1,1,'我');
text;// "文我增"
substringData(offset,count):提取从offset指定位置开始到offset+count为止处(不包括count索引处的)的字符串。可以理解为从offset开始提取count个字符。
text.substringData(1,2);// "我增"
length:保存着节点中字符的数目,而且nodeValue.length和data.length中也保存着同样的值。
text.length;// 2 文本节点的length属性
text.nodeValue.length;// 2
text.data.length;// 2
//text.nodeValue和text.data为字符串,字符串继承自String.prototype.leng的length属性
(2).继承自Text.protoype
splitText(offset):从offset指定位置将当前文本节点分成两个文本节点,返回后面的那个文本节点,此时的文本节点对象text为前面的文本节点。
text.splitText(1);// "增"
text;// "我"
(3).在修改文本节点时还要注意,当修改的内容包含HTML(或XML,取决于文档)标签时,文本节点当作文本来处理,但innerHTML(继承自Element.prototype)却会解释为标签。
var text=document.getElementsByClassName('gb_P gb_R')[0];
text;// <span class="gb_P gb_R">xiaotouming</span>
text.firstChild;// "xiaotouming" 是文本节点
text.firstChild.nodeValue='<strong>sdv</strong>'; //此时原来网页中"xiaotouming"的文本内容变为了"<strong>sdv</strong>"
text;// <span class="gb_P gb_R"><strong>sdv</strong></span>
text.innerHTML='<strong>sdv</strong>';
text;// <span class="gb_P gb_R">...</span> 此时strong被解释为标签,sdv文本加粗
目录
创建文本节点
规范化文本节点
分割文本节点
创建文本节点
创建新文本节点的同时也会为其设置ownerDocument属性。不过除非把新节点添加到文档树种已经存在的节点中否则我们不会在浏览器窗口中看到新节点。
text=document.createTextNode('<b>sdvc</b>');
text.ownerDocument;// #document
一般情况下每个元素只有一个文本节点,不过某些情况下可能包含多个文本子节点。
var ele=document.createElement('div');
var text1=document.createTextNode('文本一');
var text2=document.createTextNode('文本二');
ele.appendChild(text1);
ele.appendChild(text2);
ele;// <div>"文本一""文本二"</div>
如果两个节点是相邻同胞节点,那么这两个节点中的文本就会连起来显示,中间不会有空格。
规范化文本节点
DOM文档中存在相邻的同胞节点很容易产生混乱,分不清哪个文本节点是哪个字符串。
将相邻文本节点合并的方法:normalize():继承自Node.prototype。如果在一个包含两个或多个文本节点的父元素上调用normalize()方法,则会将所有相邻文本节点合并为一个节点,结果节点的nodeValue等于将合并前每个本文节点的nodeValue值拼接起来的值。
var ele=document.createElement('div');
var text1=document.createTextNode('文本一');
var text2=document.createTextNode('文本二');
ele.appendChild(text1);
ele.appendChild(text2);
ele.childNodes.length;//
ele.normalize();
ele.childNodes.length;//
然而浏览器在解析文档时永远不会创建相邻文本节点,不论元素中文本怎么写,总是认为是一个文本节点,这种两个以上文本节点存在只会在执行DOM操作的结果出现。
分割文本节点
text.splitText(offset):继承自Text.prototype,这个方法从offset指定位置将一个文本节点分成两个文本节点,按照指定位置分割nodeValue值,原来的文本节点将包含从开始到指定位置之前的内容,返回的新文本节点将包含剩下的文本。分割文本节点是从文本节点提取数据的一种常用DOM解析技术。
var ele=document.createElement('div');
var text=document.createTextNode('Hello World');
ele.appendChild(text); var newnode=ele.firstChild.splitText(5);
newnode;// " World" 文本节点
text;// "Hello" 文本节点
ele.childNodes.length;//
兼容性
<=IE8会忽略掉HTML元素中的文本节点。FF和Chrome和>IE8不会忽略。
参考
《JavaScript高级程序设计》
从原型链看DOM--Text类型的更多相关文章
- 从原型链看DOM--Node类型
前言: 本系列从原型,原型链,属性类型等方面下手学习了DOM文档对象模型,旨在弄清我们在DOM中常用的每一个属性和方法都清楚它从哪里来要到哪里做什么事,这样对于理解代码有一定启发.全靠自己在总结中摸索 ...
- 从原型链看DOM--Comment,CDATASection,DocumentType,DocumentFragment,Attr类型
这次总结的是剩下的这些DOM类型节点,可能你见过却不经常使用但是了解一下总是好的,可以加深对DOM体系的整体理解~.本篇要介绍的是Comment,CDATASection,DocumentType,D ...
- 从原型链看DOM--Document类型
JavaScript通过Document类型表示文档,原型链的继承关系为:document.__proto__->HTMLDocument.prototype->Document.prot ...
- 从原型链看DOM--Element类型
Element类型用于表现XML或HTML元素,提供对元素标签名,子节点及特性的访问.原型链的继承关系为 某节点元素.__proto__->(HTML某元素Element.prototype)- ...
- [js]js原型链继承小结
这是之前总结的, 发现有很多的毛病,就是重点不突出,重新翻看的时候还是得耗费很长时间去理解这玩意. js中的继承 js中什么是类 1,类是函数数据类型 2.每个类有一个自带prototype属性 pr ...
- JavaScript继承基础讲解,原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承
说好的讲解JavaScript继承,可是迟迟到现在讲解.废话不多说,直接进入正题. 既然你想了解继承,证明你对JavaScript面向对象已经有一定的了解,如还有什么不理解的可以参考<面向对象J ...
- 用ECMAScript4 ( ActionScript3) 实现Unity的热更新 -- 使用原型链和EventTrigger
原型链是JS的必备,作为ECMAScript4,原型链也是支持的. 特别说明,ActionScript3是支持完整的面向对象继承支持的,原型链只在某些非常特殊的情况下使用. 本文旨在介绍如何使用原型链 ...
- js javascript 原型链详解
看了许多大神的博文,才少许明白了js 中原型链的概念,下面给大家浅谈一下,顺便也是为了巩固自己 首先看原型链之前先来了解一下new关键字的作用,在许多高级语言中,new是必不可少的关键字,其作用是为了 ...
- MySQL varchar 最大长度,text 类型占用空间剖析
MySQL 表中行的最大大小为 65,534(实际行存储从第二个字节开始)字节.每个 BLOB 和 TEXT 列只占其中的 5 至 9 个字节. 那么来验证下 varchar 类型的实际最大长度: 测 ...
随机推荐
- ASP.NET MVC4 权限验证
在ASP.NET MVC4 中继承ActionFilterAttribute 类,重写OnActionExecuting方法 /// <summary> /// 权限拦截 /// < ...
- 输出JS代码中的变量内容
一. 输出JS代码中的变量内容 1. 可以直接以提示框的形式输出 alert("输出的内容"); 2. 可以输出到网页的某个位置 a. 在显示输出的位置放一个标签 <a id ...
- javascript实现URL编码与解码
一.预备知识 URI是统一资源标识的意思,通常我们所说的URL只是URI的一种.典型URL的格式如下所示.下面提到的URL编码,实际上应该指的是URI编码. foo://example.com:804 ...
- hdu 5065 数学题
#include<iostream> #include<cmath> #include<cstdio> using namespace std; int A,B,y ...
- MathType模板不见了如何处理
MathType是一款在编辑公式方面非常好用的软件!并广泛应用在文档编辑与期刊排版中.但是新手用户在使用MathType编辑公式时会遇到一些处理不了的状况,这个时候就需要去找一些相关的教程来解决问题. ...
- 我的Android进阶之旅------>MIME类型大全
今天在实现一个安装apk的代码中看到一段代码为:application/vnd.android.package-archive.不知其意.所以百度了一下,了解到这是一种MIME的类型,代表apk类型. ...
- .Net CCNet C#6.0 自动化编译问题解决
一.问题描述 由于C#6.0一些新的语法特性,导致先前部署的CCNet持续集成平台出现问题,无论是手动还是命令行均不能编译. 二.解决方案 1.下载BuildTools_Full.exe,地址:h ...
- c++多线程例(互斥体,共同访问)
<pre name="code" class="cpp">//这是2个线程模拟卖火车票的小程序 #include <windows.h> ...
- 【BZOJ2792】[Poi2012]Well 二分+双指针法
[BZOJ2792][Poi2012]Well Description 给出n个正整数X1,X2,...Xn,可以进行不超过m次操作,每次操作选择一个非零的Xi,并将它减一. 最终要求存在某个k满足X ...
- 11.Curator扩展库
Recipes组件包含了丰富的Curator应用的组件.但是这些并不是ZooKeeper Recipe的全部.大量的分布式应用已经抽象出了许许多多的的Recipe,其中有些还是可以通过Cura ...