Text类型

最新推荐文章于 2025-02-14 16:36:26 发布

weixin_30256505

最新推荐文章于 2025-02-14 16:36:26 发布

阅读量240

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/gaoxuerong123/p/7803668.html

本文介绍了在DOM中如何创建、规范化及分割文本节点。通过document.createTextNode()可以创建文本节点，并将其添加到文档树中。规范化文本节点能将相邻的文本节点合并为一个。splitText()方法则用于将一个文本节点分割成两个。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Text类型(创建文本节点,规范化文本节点,分割文本节点)</title>
	</head>
	<body>
		<div id="myDiv" class="bd" title="Body text" lang="en">v</div>
	</body>
	<script>
		/*
		 nodeType的值为3；
		 nodeName的值为"#text"；
		 nodeValue的值为节点所包含的文本；
		 parentNode是一个Element；
		 不支持（没有）子节点。
		 * */
		/*
		 appendData(text)：将text添加到节点的末尾。
		 deleteData(offset, count)：从offset指定的位置开始删除count个字符.
		 insertData(offset, text)：在offset指定的位置插入text。
		 replaceData(offset, count, text)：用text替换从offset指定的位置开始到offset+ count为止处的文本。
		 splitText(offset)：从offset指定的位置将当前文本节点分成两个文本节点。
		 substringData(offset, count)：提取从offset指定的位置开始到offset+count为止处的字符串。
		 除了这些方法之外，文本节点还有一个length属性，保存着节点中字符的数目。而且，nodeValue.length和data.length中也保存着同样的值。
		 在默认情况下，每个可以包含内容的元素最多只能有一个文本节点.
		 * */
		
		 var textNode = document.createTextNode("Helloworld!");
		 document.getElementById('myDiv').appendChild(textNode)
		 
		 /*
		 创建文本节点
		 document.createTextNode()创建新文本节点
		 在创建新文本节点的同时，也会为其设置ownerDocument属性。不过，除非把新节点添加到文档树中已经存在的节点中，否则我们不会在浏览器窗口中看到新节点。
		 * */
		/*规范化文本节点
		 DOM 文档中出现相邻文本节点的情况也不在少数，于是就催生了一个能够将相邻文本节点合并的方法。这个方法是由 Node 类型定义的（因而在所有节点类型中都存在）;
		 名叫 normalize()。如果在一个包含两个或多个文本节点的父元素上调用 normalize()方法，则会将所有文本节点合并成一个节点，结果节点的 nodeValue
		 等于将合并前每个文本节点的 nodeValue 值拼接起来的值。浏览器在解析文档时永远不会创建相邻的文本节点。这种情况只会作为执行 DOM 操作的结果出现。
		 * */
		
		/*分割文本节点
		 Text 类型提供了一个作用与 normalize()相反的方法：splitText()。这个方法会将一个文本节点分成两个文本节点，
		 即按照指定的位置分割 nodeValue 值。原来的文本节点将包含从开始到指定位置之前的内容，新文本节点将包含剩下的文本。
		 这个方法会返回一个新文本节点，该节点与原节点的parentNode 相同。
		 
		 * */
	</script>
</html>

转载于:https://www.cnblogs.com/gaoxuerong123/p/7803668.html