关闭

ECMAScript5 DOM模型 Text详解

269人阅读 评论(0) 收藏 举报
分类:
<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>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:15654次
    • 积分:345
    • 等级:
    • 排名:千里之外
    • 原创:20篇
    • 转载:0篇
    • 译文:0篇
    • 评论:1条
    文章分类
    文章存档
    最新评论