ECMAScript5 DOM模型 Text详解

原创 2015年07月07日 12:10:45
<html>
	<head>
	<title>
		ECMAScript5 DOM模型 Text详解
	</title>
	<script type="text/javascript">
			window.onload = function(){
				/*
					文本节点:包含的内容只能是纯文本,可以包含转义后的HTML字符,
					不能包含HTML代码。
					nodeType的值为3
					nodeName的值为#text
					nodeValue的值为节点所包含的文本
					parentNode是一个Element
					不支持(没有)子节点
					可以通过nodeVlaue属性或者data访问Text中包含的文本,这两个属性中包含值相同。
					对nodeValue的修改也会通过data反映出来,反之亦然。
					使用下列方法可以操作节点中的文本。
					appendData(text):将文本添加到节点末尾。
					deleteData(offset,count):从offset指定位置开始删除count个字符。
					insertData(offset,count):在offset指定位置插入text。
					replaceData(offset,count,text):用text替换offset位置到offset+count位置的文本。
					splitText(offset):以offset位置为中点将当前文本节点分成两个文本节点。
					subStringData(offset,count):提取从offset指定的位置开始到
												offset+count为止处的字符串。
					除了这些方法外文本还有一个length的属性,中保存着文本的字符数目。而且,
					nodeVlue.length和data.length保存的是同样的值。
					在默认的的情况下,每一个可以包含内容的元素最多只能有一个文本节点,而且必须确实有内容
					存在。下面是例子
					第一种:没有内容也就没有文本节点
					<div></div>
					第二种:有空格,因而有一个文本节点
					<div> </div>
					第三种:有内容,因而有一个文本节点
					<div>我就是div的内容</div>
					
					访问文本节点:
					var textNode = div.firstChild;//或者div.childNode[0];
					
					div.firstChild.nodeValue= "hello word!";//修改div中的文本内容
					
					值得注意的是如果nodeValue给的字符串会经过html(或者xml、根据文档类型)编码。
					如下面的例子中小于大于引号都会像下面例子一样进行转义
					//输出结果是“Some <strong</strong>message”
					div.firstChild.nodeValue="Some <strong>other</strong>message";
				
					创建文本节点
					可以使用document.createTextNode()创建新文本节点,这个方法接受一个参数----要插入
					节点中的文本。与设置已有文本节点值是一样,作为参数的文本也将按照HTML或者XML的格式
					进行编码。
					
					var textNode = document.createTextNode("<strong>Hello</strong> world!");
					在创建新文本节点的同时,也会为其设置owerDocument属性。不过,除非把新节点
					添加到文档树中已经存在的节点中,否则我们不会在浏览器窗口看到新节点。下面
					的代码会创建一个<div>元素并向其中添加一条消息。
					
					var element = document.creataElement("div");
					element.className="message";
					var textNode = document.createTextNode("Hello world !");
					element.appendChild(textNode);
					document.body.appendChild(element);
					这个例子创建一个新的<div>元素并且为他指定message的class特性。然后,又创建
					一个文本节点,并将其添加到前面创建的元素中,最后一步,就是将这个元素添加到
					了文档的<body>元素中,这样就可以在浏览器中看到新创建的元素的文本节点了。
					
					一般,每个元素只有一个文本节点,不过在某些情况下也可能包含多个文本子节点,
					如下面例子。
					var element = document.createElement("div");
					element.className = "message";
					var textNode = document.createTextNode("Hello world!");
					element.appendChild(textNode);
					
					var anotherTextNode = document.createTextNode("Yippee!");
					element.appendChild(anotherTextNode);
					document.body.appendChild(element);
					如果两个文本节点为同胞节点,那么这两个节点中的文本就会连起来显示,
					中间不会有空格。
					
					//规范文本节点
					//normalize()合并文本节点
					DOM文档中存在相邻的同胞文本节点很容易导致混乱,因为分不清哪个文本节点
					表示哪个字符串。另外,DOM中出现相邻的文本节点的不占少数,于是就催生了
					能够将相邻节点合并的方法。这个方法由Node类型定义的(因而在所有节点中都存在),
					normalize()方法,则会将所有的文本节点合并成一个节点,结果节点的nodeValue等于
					将合并前每个文本节点的nodeValue值拼接起来的值。来一个例子。
					var element = document.createElement("div");
					element.className = "message";
					
					var textNode = document.createTextNode("Hello world!");
					element.appendChild(textNode);
					
					alert(element.childNodes.length);//2
					element.normalize();
					alert(element.childNodes.length);//1
					alert(element.firstChild.nodeValue);//"Hello world! Yippss";
					浏览器在解析文档时永远不会创建相邻的节点。这种情况只会作为执行
					DOM操作的结果出现。
					注意:在某些情况下normalize()会导致ie6崩溃,ie7及更高的版本不存在
					这个问题。
					
					//splitText()分割文本节点
					这个方法可以把一个文本节点分割成两个文本节点,即按照指定的位置
					nodeValue值。原来的文本包含开始到分割点位置的文本,新文本包含将包
					含剩下来的文本。这个方法会返回一个新文本节点,该节点的parentNode与
					原来节点的parentNode相同。
					下列例子。
					var element = document.createElement("div");
					element.className = "message";
					var textNode = document.createTextNode("Hello world!");
					element.appendChild(textNode);
					
					document.body.appendChild(element);
					
					var newNode = element.firstChild.splitText(5);
					alert(element.firstChild.nodeValue);//"Hello"
					alert(newNode.nodeValue);//"world!"
					alert(element.childNodes.length);//2
					在这个例子中,包含“Hello World!”的文本节点被分割成两个文本节点,
					从位置5开始。位置5是“Hello”和“word!”之间的空格,因此原来的文本
					节点将包含字符“Hello”,而新的文本节点将包含“world!”(包含空格)。
					分割文本节点是从文本节点提取数据的一种常用的DOM解析技术。
				*/
			}
			
	</script>
	</head>
	<body>
	</body>
</html>

版权声明:本文为博主原创文章,未经博主允许不得转载。

ECMAScript5 DOM模型 Comment详解

注释在DOM中d通过Comment类型来表示的。Comment节点具有以下特征: nodeType:8 nodeName:"#comment" nodeValue:注释内容 parentNod...
  • only_Love_Strangers
  • only_Love_Strangers
  • 2015年07月08日 20:54
  • 226

ECMASCRIPT5 DOM Document类型详解

DOM Document类型详解 window.onload = function(){ /*发现document第一个子节点不是head 而是body 并且docume...
  • only_Love_Strangers
  • only_Love_Strangers
  • 2015年06月22日 22:31
  • 193

ECMAScript5对DOM模型Node的操作

ECMAScript5对Node的操作 window.onload = function(){ //appendChild //新建一个div元素节点 var n...
  • only_Love_Strangers
  • only_Love_Strangers
  • 2015年06月15日 20:33
  • 201

了解DOM模型

1. 概述 DOM不是一门什么技术,可以说它只是提供访问结构化文档的一种方式,主要是XML文档和HTML文档。基于这种思想,各种语言都有自己的DOM解析器。DOM解析器的作用就是完成结构化文档和...
  • owen_william
  • owen_william
  • 2016年04月07日 19:38
  • 747

Java进阶学习第四天——DOM入门

DOM 文档对象模型 DOM解析HTML DOM结构模型 DOM的三个级别 DHTML BOM和HTML DOM的关系图 NODE 接口的特性和方法 Document 对象 Document常用方法 ...
  • lutianfeiml
  • lutianfeiml
  • 2016年04月14日 17:46
  • 3685

jQuery中DOM操作方法 之 html,text,val

jQuery内核 DOM操作方法 之 html,text,val 回顾下几组DOM插入有关的方法 innerHTML 设置或获取位于对象起始和结束标签内的 HTML  outerHT...
  • whereismatrix
  • whereismatrix
  • 2015年05月08日 15:40
  • 2322

DOM(文档对象模型) 概念

DOM: Document Object Model 文档对象模型                主要用来将标记型文档(html,xml)封装成对象,并将标记型文档中的所有内容(标签、文本、属性等)都...
  • wangjian_an
  • wangjian_an
  • 2016年06月06日 12:39
  • 608

JS——文档对像模型DOM

什么是dom? dom不是javascript,dom是文档。 dom是一组用来描述脚本怎么与结构化文档进行交互和访问的web标准。 dom定义了一系列对象、方法和属性,用于访问、操作和创建文档...
  • culous
  • culous
  • 2016年09月17日 23:08
  • 254

dom(一)——获取文本内容的方法

在利用DOM获取节点之后 有多种方法可以获取节点中的文本内容   1. innerHTML innerHTML可以作为获取文本的方法也可以作为修改文本内容的方法 element.innerH...
  • AlexDQ
  • AlexDQ
  • 2017年03月22日 13:34
  • 2351

文档对象模型DOM概述及DOM树

DOM技术 1.Dom概述? * 什么是DOM?  docuemnt object model 文档对象模型 * 它的作用?   重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目 *...
  • CSDN_GIA
  • CSDN_GIA
  • 2016年11月28日 14:27
  • 516
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ECMAScript5 DOM模型 Text详解
举报原因:
原因补充:

(最多只允许输入30个字)