首页 > 其他分享 >js 规范化文本节点

js 规范化文本节点

时间:2024-01-23 14:03:44浏览次数:37  
标签:document 节点 js element world 文本 Hello

在将一个文本节点作为另一个文本节点的同胞插入后,两个文本节点的文本之间不会包含空格。

2. 规范化文本节点

DOM 文档中的同胞文本节点可能导致困惑,因为一个文本节点足以表示一个文本字符串。同样, DOM 文档中也经常会出现两个相邻文本节点。为此,有一个方法可以合并相邻的文本节点。这个方法 叫 normalize(),是在 Node 类型中定义的(因此所有类型的节点上都有这个方法)。在包含两个或多 个相邻文本节点的父节点上调用 normalize()时,所有同胞文本节点会被合并为一个文本节点,这个 文本节点的 nodeValue 就等于之前所有同胞节点 nodeValue 拼接在一起得到的字符串。来看下面的 例子:

let element = document.createElement("div");
    element.className = "message";
    let textNode = document.createTextNode("Hello world!");
    element.appendChild(textNode);
    let anotherTextNode = document.createTextNode("Yippee!");
    element.appendChild(anotherTextNode);
    document.body.appendChild(element);
    alert(element.childNodes.length);    // 2
element.normalize();
alert(element.childNodes.length); // 1 alert(element.firstChild.nodeValue); // "Hello world!Yippee!"

浏览器在解析文档时,永远不会创建同胞文本节点。同胞文本节点只会出现在 DOM 脚本生成的文 档树中。

3. 拆分文本节点

Text 类型定义了一个与 normalize()相反的方法——splitText()。这个方法可以在指定的偏移 位置拆分 nodeValue,将一个文本节点拆分成两个文本节点。拆分之后,原来的文本节点包含开头到 偏移位置前的文本,新文本节点包含剩下的文本。这个方法返回新的文本节点,具有与原来的文本节点 相同的 parentNode。来看下面的例子:

let element = document.createElement("div");
   element.className = "message";
   let textNode = document.createTextNode("Hello world!");
   element.appendChild(textNode);
   document.body.appendChild(element);
   let newNode = element.firstChild.splitText(5);
   alert(element.firstChild.nodeValue);  // "Hello"
   alert(newNode.nodeValue);             // " world!"
   alert(element.childNodes.length);     // 2

在这个例子中,包含"Hello world!"的文本节点被从位置 5 拆分成两个文本节点。位置 5 对应 "Hello"和"world!"之间的空格,因此原始文本节点包含字符串"Hello",而新文本节点包含文本" world!"(包含空格)。 拆分文本节点最常用于从文本节点中提取数据的 DOM 解析技术。

标签:document,节点,js,element,world,文本,Hello
From: https://blog.51cto.com/u_16298168/9379066

相关文章

  • js 创建文本节点 document.createTextNode()
    示例中的第一个div元素中不包含内容,因此不会产生文本节点。只要开始标签和结束标签之间有内容,就会创建一个文本节点,因此第二个元素会有一个文本节点的子节点,虽然它只包含空格。这个文本节点的nodeValue就是一个空格。第三个元素也有一个文本节点的子节点,其nodeValue的值为"He......
  • JS、HTML内嵌iframe第三方网页,如何通信?
    在实际使用postMessage时,如果你不确定确切的父页面或子页面的源地址(即origin),可以采取以下策略:允许任意源发送消息:如果你希望iframe子页面能够向任何父页面发送消息,或者父页面接受来自任何域的iframe消息,可以在调用postMessage时将目标源设置为通配符*://子页面向任意源发送windo......
  • 自我记录js正则
    一、数字相关只有数字:/^[0-9]*$/或/^\d{1,}$/整数:/^-?[0-9]\d*$/正整数:/^\+?[1-9]\d*$/非正整数:/^-[1-9]\d*|0$/负整数:/^-[1-9]\d*$/非负整数:/^\d+$/浮点数:/^(-?\d+)(\.\d+)?$/正浮点数:/^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$/负浮点数:/^-([1-9]\d*\.\d*|......
  • OPENJSON requires Compatibility Level 130
    ParseandTransformJSONDatawithOPENJSONOPENJSONrequiresCompatibilityLevel130TheOPENJSONfunctionisavailableonlyundercompatibilitylevel130.Ifyourdatabasecompatibilitylevelislowerthan130,SQLServercan'tfindandruntheO......
  • js中的bigint类型转化为json字符串时报无法序列化的问题
    网上查了一下,解决这个问题的思路就是将bigint类型的数据转化为字符串,这样就能正确转化为json字符串了。对于一个是bigint的变量,直接使用toString方法就可以转化为字符串了,但是bigint变量在一个对象中,那么我们就需要一个更加通用的方法,网上看到一个很好的封装好的方法,如下。expor......
  • [转]js 正则相关的两个方法match和exec的区别
    原文地址:jsmatch和exec的区别_javascriptmatchexec-CSDN博客一、使用方法不同exec()是正则对象的方法;reg.exec(str);match()是字符串的正则表达方法;str.match(reg);二、返回结果不同w3cSchool是这么说的:match()方法将检索字符串stringObject,以找到一个或多个与regex......
  • Java开发者的Python进修指南:JSON利器之官方json库、demjson和orjson的实用指南
    JSONJSON作为目前最流行的传输格式,在Python中也有相应的实现方式。由于JSON格式的文本可以跨平台并且简单易用,因此被广泛传播。因此,我们今天的主要讨论内容是如何熟练地应用Python的JSON库来处理将JSON映射到文本,以及如何从文本映射到对象中。现在,让我们开始探讨这个话题。官方j......
  • 某建筑网页js逆向分析过程(有坑)
    某建筑网页js逆向分析过程(有坑)https://blog.csdn.net/ak_bingbing/article/details/134399056 acmakb于2023-11-1414:56:27发布阅读量709收藏点赞数4分类专栏:网络爬虫文章标签:javascript爬虫python版权网络爬虫专栏收录该内容20篇文章0订阅订阅专栏某建筑网......
  • crypto-js 加密、解密使用方法
    crypto-js加密、解密使用方法爱宇阳于2021-12-1015:35:32发布阅读量5.9w收藏201点赞数38分类专栏:VueJavaScriptHTML5文章标签:javascript前端vue.js版权华为云开发者联盟该内容已被华为云开发者联盟社区收录加入社区Vue同时被3个专栏收录81篇文章9订阅订阅......
  • 一文读懂JavaScript DOM节点操作(JavaScript DOM节点操作详解)
    一、什么是节点DOM模型是树状结构模型,二组成这棵树的就是一个个点,在网络术语中称之为节点。节点是一个模型中最基本的组成单位。DOM模型是由一个个节点组成的,DOM节点也有其不同的类型。二、节点类型DOM节点分为5种类型:文档节点(就是整个HTML文档,也就是document对象)元素节点......