博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
深入理解DOM节点类型第二篇——文本节点Text
阅读量:6829 次
发布时间:2019-06-26

本文共 2139 字,大约阅读时间需要 7 分钟。

前面的话

  文本节点顾名思义指向文本的节点,网页上看到的文字内容都属于文本节点。该节点简单直观,本文将详细介绍该部分内容

 

特征

  文本节点由Text类型表示,包含的是纯文本内容,但文本节点是对象类型

内容

  纯文本内容中的HTML字符会被转义,关于转义字符的详细情况

<内容>

  文本节点的三个node属性——nodeType、nodeName、nodeValue分别是3、'#text'和节点所包含的文本,其父节点parentNode指向包含该文本节点的元素节点,文本节点没有子节点

  [注意]DOM树中共存在12种节点类型,详细情况

test

 

空白文本节点

  关于文本节点,遇到最多的兼容问题是空白文本节点问题。IE8-浏览器不识别空白文本节点,而其他浏览器会识别空白文本节点

1

 

属性

data

  文本节点的data属性与nodeValue属性相同

test

wholeText

  wholeText属性将当前Text节点与毗邻的Text节点,作为一个整体返回。大多数情况下,wholeText属性的返回值,与data属性和textContent属性相同。但是,某些特殊情况会有差异

  [注意]IE8-浏览器不支持

123

length

  文本节点的length属性保存着节点字符的数目,而且nodeValue.length、data.length也保存着相同的值

test

 

方法

createTextNode()

  createTextNode()方法用于创建文本节点,这个方法接收一个参数——要插入节点中的文本

123

normalize()

  normalize()方法的作用是合并相邻的文本节点,该方法在文本节点的父节点——元素节点上调用

  [注意]IE9+浏览器无法正常使用该方法

0

splitText()

  与normalize()方法作用相反,splitText()方法将一个文本节点分成两个文本节点,即按照指定的位置分割nodeValue值。原来的文本节点将包含从开始到指定位置之前的内容。这个方法会返回一个新文本节点,包含剩下的文本。splitText()方法返回的节点与原节点的parentNode相同 

123

appendData()

  appendData(text)方法将text添加到节点的末尾,该方法无返回值

123

deleteData()

  deleteData(offset,count)方法从offset指定的位置开始删除count个字符,无返回值

123

insertData()

  insertData(offset,text)方法在offset指定的位置插入text,无返回值

123

replaceData()

  replaceData(offset,count,text)方法用text替换从offset指定位置开始到offset+count为止的文本,无返回值

123

substringData()

  substringData(offset,count)方法提取从offset指定的位置开始到offset+count为止处的字符串,并返回该字符串。原来的文本节点无变化

123

 

性能

  通过上面的方法介绍,我们会发现,文本节点的操作与相当类似。一般地,我们获取文本都用innerHTML,然后再去字符串的操作方法去操作。下面对两者的性能进行对比分析

  【1】首先,对replaceData()和replace()这两个方法进行比较。replace()方法又分为两个方法,一个是在循环中直接对innerHTML进行赋值;另一个是在循环中对变量进行赋值,最后再赋值给innerHTML

123

  从结果中可以看出,在100万次的循环中,直接操作innerHTML开销较大,操作文本节点的的开销最小

  【2】对substring()和substringData()方法进行比较,这两种方法都用于提取子串

123

  从结果中可以看出,在1000万次的循环中,使用substringData()方法比substring()方法的开销较大

 

最后

  元素的文本可以看成字符串,也可以看成节点

  除了字符串操作方法,也可以使用或者文本节点方法

  思路广一点,解决问题时才更自如一点

  以上

转载于:https://www.cnblogs.com/xiaohuochai/p/5815193.html

你可能感兴趣的文章
SpringBoot启动和停止脚步
查看>>
BZOJ1014: [JSOI2008]火星人prefix(splay 二分 hash)
查看>>
LWIP_STM32_ENC28J60(转)
查看>>
Visual Studio 2019 preview中体验C# 8.0新语法
查看>>
Linux下进程通信之管道
查看>>
CentOS 7创建自定义KVM模板(现有KVM迁移到另外一台机)
查看>>
Python异常处理详解
查看>>
Nginx服务状态的监控
查看>>
JDBC-ODBC桥接方法连接Excel数据库的方法
查看>>
使用WCF的Trace与Message Log功能
查看>>
电子书下载:Beginning iPhone 4 Development: Exploring the iOS SDK
查看>>
Qt的元对象(Meta-Object)系统简介
查看>>
matlab练习程序(最大似然估计)
查看>>
Oracle 各种查询语句
查看>>
工厂方法模式与IoC/DI
查看>>
Linux编程(获取系统时间)
查看>>
速记 - 实现sql server clr trigger
查看>>
PowerShell 开发
查看>>
C#3.0实现变异赋值(Mutantic Assignment)
查看>>
MySql的一些基本使用及操作命令 (待更新)
查看>>