深入理解DOM节点类型第二篇——文本节点Text
前面的话
文本节点顾名思义指向文本的节点,网页上看到的文字内容都属于文本节点。该节点简单直观,本文将详细介绍该部分内容
特征
文本节点由Text类型表示,包含的是纯文本内容,但文本节点是对象类型
<div id="box">内容</div>
<script>
console.log(box.firstChild);//"内容"
console.log(typeof box.firstChild);//'object'
</script>
纯文本内容中的HTML字符会被转义,关于转义字符的详细情况移步至此
<div id="box"><内容></div>
<script>
console.log(box.firstChild);//"<内容>""
</script>
文本节点的三个node属性——nodeType、nodeName、nodeValue分别是3、'#text'和节点所包含的文本,其父节点parentNode指向包含该文本节点的元素节点,文本节点没有子节点
[注意]DOM树中共存在12种节点类型,详细情况移步至此
<div id="box">test</div>
<script>
var oTxt = box.firstChild;
console.log(oTxt.nodeType);//3
console.log(oTxt.nodeValue);//test
console.log(oTxt.nodeName);//'#text'
console.log(oTxt.parentNode);//<div>
console.log(oTxt.childNodes);//[]
</script>
空白文本节点
关于文本节点,遇到最多的兼容问题是空白文本节点问题。IE8-浏览器不识别空白文本节点,而其他浏览器会识别空白文本节点
<div id="box">
<div>1</div>
</div>
<script>
//标准浏览器输出[text, div, text],text表示空白文本节点
//IE8-浏览器输出[div],并不包含空白文本节点
console.log(box.childNodes);
</script>
属性
data
文本节点的data属性与nodeValue属性相同
<div id="box">test</div>
<script>
var oBox = document.getElementById('box');
var oTest = oBox.firstChild;
//test test true
console.log(oTest.nodeValue,oTest.data,oTest.data === oTest.nodeValue);
</script>
wholeText
wholeText属性将当前Text节点与毗邻的Text节点,作为一个整体返回。大多数情况下,wholeText属性的返回值,与data属性和textContent属性相同。但是,某些特殊情况会有差异
[注意]IE8-浏览器不支持
<div id="test">123</div>
<script>
console.log(test.firstChild.wholeText);//123
console.log(test.firstChild.data);//123
//以索引1为指定位置分割为两个文本节点
test.firstChild.splitText(1);
console.log(test.firstChild.wholeText);//123
console.log(test.firstChild.data);//1
</script>
length
文本节点的length属性保存着节点字符的数目,而且nodeValue.length、data.length也保存着相同的值
<div id="box">test</div>
<script>
var oBox = document.getElementById('box');
var oTest = oBox.firstChild;
//4 4 4
console.log(oTest.length,oTest.nodeValue.length,oTest.data.length);
</script>
方法
createTextNode()
createTextNode()方法用于创建文本节点,这个方法接收一个参数——要插入节点中的文本
<div id="box">123</div>
<script>
var oBox = document.getElementById('box');
var oText = document.createTextNode('<strong>hello</strong> world!');
oBox.appendChild(oText);
//'123<strong>hello</strong> world!'
console.log(oBox.innerHTML);
//此时,页面中有两个文本节点
console.log(oBox.childNodes.length);
</script>
normalize()
normalize()方法的作用是合并相邻的文本节点,该方法在文本节点的父节点——元素节点上调用
[注意]IE9+浏览器无法正常使用该方法
<div id="box">0</div>
<script>
var oText1 = document.createTextNode('1');
var oText2 = document.createTextNode('2');
box.appendChild(oText1);
box.appendChild(oText2);
console.log(box.childNodes);//[text, text, text]
console.log(box.childNodes.length);//3
box.normalize();
//IE9+浏览器返回[text,text],而其他浏览器返回[text]
console.log(box.childNodes);
//IE9+浏览器返回'01',而其他浏览器返回'012'
console.log(box.childNodes[0]);
//IE9+浏览器返回2,使用该方法时只能将所有的文本节点减1;其他浏览器正常,返回2
console.log(box.childNodes.length);//1
</script>
splitText()
与normalize()方法作用相反,splitText()方法将一个文本节点分成两个文本节点,即按照指定的位置分割nodeValue值。原来的文本节点将包含从开始到指定位置之前的内容。这个方法会返回一个新文本节点,包含剩下的文本。splitText()方法返回的节点与原节点的parentNode相同
<div id="box">123</div>
<script>
var oBox = document.getElementById('box');
var newNode = oBox.firstChild.splitText(1);
console.log(newNode,newNode === oBox.lastChild);//'23' true
console.log(oBox.firstChild);//'1'
</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'));//undefined
console.log(oText.data);//'1234'
console.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));//undefined
console.log(oText.data);//'3'
console.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'));//undefined
console.log(oText.data);//'1test23'
console.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"));//undefined
console.log(oText.data);//'1test3'
console.log(oBox.childNodes.length);//1
</script>
substringData()
substringData(offset,count)方法提取从offset指定的位置开始到offset+count为止处的字符串,并返回该字符串。原来的文本节点无变化
<div class="box" id="box">123</div>
<script>
var oBox = document.getElementById('box');
var oText = oBox.firstChild;
console.log(oText.substringData(1,1));//'2'
console.log(oText);//'123'
</script>
性能
通过上面的方法介绍,我们会发现,文本节点的操作与字符串的操作方法相当类似。一般地,我们获取文本都用innerHTML,然后再去字符串的操作方法去操作。下面对两者的性能进行对比分析
【1】首先,对replaceData()和replace()这两个方法进行比较。replace()方法又分为两个方法,一个是在循环中直接对innerHTML进行赋值;另一个是在循环中对变量进行赋值,最后再赋值给innerHTML
<div id="box">123</div>
<script>
var oBox = document.getElementById('box');
var oText = oBox.firstChild;
var str = oBox.innerHTML; function stringTest1(){
for(var i = 0; i < 1000000; i++){
oBox.innerHTML = str.replace(1,Math.floor(Math.random() * 9 + 1));
}
}
var start1 = Date.now();
stringTest1();
var stop1 = Date.now();
result1 = stop1 - start1;
console.log('str1',result1)//2351 /*********************************/
function stringTest2(){
for(var i = 0; i < 1000000; i++){
str.innerHTML = str.replace(1,Math.floor(Math.random() * 9 + 1));
}
}
var start2 = Date.now();
stringTest2();
oBox.innerHTML = str;
var stop2 = Date.now();
result2 = stop2 - start2;
console.log('str2',result2)//408 /*********************************/
function dataTest1(){
for(var i = 0; i < 1000000; i++){
oText.replaceData(1,1,Math.floor(Math.random() * 9 + 1))
}
}
var start3 = Date.now();
dataTest1();
var stop3 = Date.now();
result3 = stop3 - start3;
console.log('data',result3)//327
</script>
从结果中可以看出,在100万次的循环中,直接操作innerHTML开销较大,操作文本节点的的开销最小
【2】对substring()和substringData()方法进行比较,这两种方法都用于提取子串
<div id="box">123</div>
<script>
var oBox = document.getElementById('box');
var oText = oBox.firstChild;
var str = oBox.innerHTML; function stringTest(){
for(var i = 0; i < 10000000; i++){
str.substring(Math.floor(Math.random() * 2),2);
}
}
var start = Date.now();
stringTest();
var stop = Date.now();
result = stop - start;
console.log('str',result)//364
/*********************************/
function dataTest(){
for(var i = 0; i < 10000000; i++){
oText.substringData(Math.floor(Math.random() * 2),1);
}
}
var start = Date.now();
dataTest();
var stop = Date.now();
result = stop - start;
console.log('str',result)//1195
</script>
从结果中可以看出,在1000万次的循环中,使用substringData()方法比substring()方法的开销较大
最后
元素的文本可以看成字符串,也可以看成节点
除了字符串操作方法,也可以使用正则或者文本节点方法
思路广一点,解决问题时才更自如一点
以上
深入理解DOM节点类型第二篇——文本节点Text的更多相关文章
- 深入理解javascript函数系列第二篇——函数参数
× 目录 [1]arguments [2]内部属性 [3]函数重载[4]参数传递 前面的话 javascript函数的参数与大多数其他语言的函数的参数有所不同.函数不介意传递进来多少个参数,也不在乎传 ...
- 深入理解javascript作用域系列第二篇——词法作用域和动态作用域
× 目录 [1]词法 [2]动态 前面的话 大多数时候,我们对作用域产生混乱的主要原因是分不清楚应该按照函数位置的嵌套顺序,还是按照函数的调用顺序进行变量查找.再加上this机制的干扰,使得变量查找极 ...
- 深入理解javascript作用域系列第二篇
前面的话 大多数时候,我们对作用域产生混乱的主要原因是分不清楚应该按照函数位置的嵌套顺序,还是按照函数的调用顺序进行变量查找.再加上this机制的干扰,使得变量查找极易出错.这实际上是由两种作用域工作 ...
- 深入理解DOM节点类型第一篇——12种DOM节点类型概述
× 目录 [1]元素 [2]特性 [3]文本[4]CDATA[5]实体引用[6]实体名称[7]处理指令[8]注释[9]文档[10]文档类型[11]文档片段[12]DTD 前面的话 DOM是javasc ...
- 深入理解DOM事件类型系列第一篇——鼠标事件
× 目录 [1]类型 [2]顺序 [3]坐标位置[4]修改键[5]相关元素[6]鼠标按键[7]滚轮事件[8]移动设备 前面的话 鼠标事件是web开发中最常用的一类事件,毕竟鼠标是最主要的定位设备.本文 ...
- 深入理解DOM事件类型系列第三篇——变动事件
× 目录 [1]删除节点 [2]插入节点 [3]特性节点[4]文本节点 前面的话 变动(mutation)事件能在DOM中的某一部分发生变化时给出提示,这类事件非常有用,但都只能使用DOM2级事件处理 ...
- 深入理解javascript对象系列第二篇——属性操作
× 目录 [1]查询 [2]设置 [3]删除[4]继承 前面的话 对于对象来说,属性操作是绕不开的话题.类似于“增删改查”的基本操作,属性操作分为属性查询.属性设置.属性删除,还包括属性继承.本文是对 ...
- xpath的数据和节点类型以及XPath中节点匹配的基本方法
XPath数据类型 XPath可分为四种数据类型: 节点集(node-set) 节点集是通过路径匹配返回的符合条件的一组节点的集合.其它类型的数据不能转换为节点集. 布尔值(boolean) ...
- 深入理解DOM事件类型系列第二篇——键盘事件
× 目录 [1]类型 [2]顺序 [3]按键信息[4]应用 前面的话 鼠标和键盘是电脑端主要的输入设备,上篇介绍了鼠标事件,本文将详细介绍键盘事件 类型 键盘事件用来描述键盘行为,主要有keydown ...
随机推荐
- Mysql - 性能优化之子查询
记得在做项目的时候, 听到过一句话, 尽量不要使用子查询, 那么这一篇就来看一下, 这句话是否是正确的. 那在这之前, 需要介绍一些概念性东西和mysql对语句的大致处理. 当Mysql Server ...
- MySQL ALTER命令
当我们需要修改数据表名或者修改数据表字段时,就需要使用到MySQL ALTER命令. 开始本文教程前让我们先创建一张表,表名为:testalter_tbl. root@host# mysql -u r ...
- 免费SSL证书 之Let’s Encrypt申请与部署(Windows Nginx)
我着着皇帝的新衣,但是你看不见 有一颗愿意等待的心,说明你对未来充满希望.有一颗充满希望的心,那么等待又算什么.人就是在等待与希望中度过,我们永远要对未来充满信心! 读在最前面: 1.本文案例为 ...
- 整理Ajax的点点滴滴
最近看了下<Javascript高级程序设计>(第三版)关于Ajax部分,做了这篇笔记. 一.常规用法 第一步,创建XHR对象var xhr = new XMLHttpRequest(); ...
- 【AI开发第一步】微软认知服务API应用
目录 介绍 API分类 使用‘视觉’API完成的Demo 点击直接看干货 介绍 从3月份Google家的阿尔法狗打败韩国围棋冠军选手李世石,到之后微软Build2016大会宣布的“智能机器人”战略.种 ...
- 弄了一个支持SSL的TCP客户端
近日需要做一些TCP的收发的调试,到网上去找TCP调试工具,找了好几款,发现不是功能不全就是不支持HEX,更重要的SSL也不支持,于是动手写了一款,叫TCPRunner,有以下特性: 使用异步IO方式 ...
- 玩转Windows服务系列——Debug、Release版本的注册和卸载,及其原理
Windows服务Debug版本 注册 Services.exe -regserver 卸载 Services.exe -unregserver Windows服务Release版本 注册 Servi ...
- 读取xml数据装配到字典中
public Dictionary<string, string> GetXml() { Dictionary<string, string> dic = new Dictio ...
- Atitit 图像处理 调用opencv 通过java api attilax总结
Atitit 图像处理 调用opencv 通过java api attilax总结 1.1. Opencv java api的支持 opencv2.4.2 就有了对java api的支持1 1. ...
- KindEditor 给KindEditor赋值
在项目的过程中,使用了KindEditor编辑器,然后在赋值的时候,我的编辑器ID是content,然后我想通过$("#content").html()来赋值,发现赋值失败,后来百 ...