DOM节点类型-Text类型

最新推荐文章于 2021-09-14 15:23:06 发布

cake_eat

最新推荐文章于 2021-09-14 15:23:06 发布

阅读量653

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/cake_eat/article/details/108745580

版权

JavaScript 专栏收录该内容

94 篇文章 1 订阅

订阅专栏

什么是Text类型？

文本节点由 Text 类型表示，包含的是可以照字面解释的纯文本内容。纯文本中可以包含转义后的 HTML字符，但不能包含 HTML代码。Text 节点具有以下特征：

nodeType 的值为 3；
nodeName 的值为"#text"；
nodeValue 的值为节点所包含的文本；、
parentNode 是一个 Element；
不支持（没有）子节点。
可以通过 nodeValue 属性或 data 属性访问 Text 节点中包含的文本，这两个属性中包含的值相同。

创建文本节点

可以使用 document.createTextNode()创建新文本节点，这个方法接受一个参数——要插入节点中的文本。
例如：

var textNode = document.createTextNode("\<strong>Hello\</strong> world!");

规范化文本节点

如果在一个包含两个或多个文本节点的父元素上调用 normalize()方法，则会将所有文本节点合并成一个节点，结果节点的 nodeValue 等于将合并前每个文本节点的 nodeValue 值拼接起来的值。

分割文本节点

Text 类型提供了一个作用与 normalize()相反的方法：splitText()。这个方法会将一个文本节点分成两个文本节点，即按照指定的位置分割 nodeValue 值。

原来的文本节点将包含从开始到指定位置之前的内容，新文本节点将包含剩下的文本。这个方法会返回一个新文本节点，该节点与原节点的 parentNode 相同。

例如：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div>hello world</div>
<button name="move">移动</button>
<script>
    var div=document.getElementsByTagName("div")[0];
    console.log(div.firstChild.splitText(2)); //"llo world"
    console.log(div.firstChild);  //"he"
</script>
</body>
</html>

cake_eat

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DOM节点类型-Text类型

什么是Text类型？文本节点由 Text 类型表示，包含的是可以照字面解释的纯文本内容。纯文本中可以包含转义后的 HTML字符，但不能包含 HTML代码。Text 节点具有以下特征：nodeType 的值为 3；nodeName 的值为"#text"；nodeValue 的值为节点所包含的文本；、parentNode 是一个 Element；不支持（没有）子节点。可以通过 nodeValue 属性或 data 属性访问 Text 节点中包含的文本，这两个属性中包含的值相同。创建文本节点
复制链接

扫一扫