跟着 MDN 学 HTML day_35：（深入解析 CharacterData 抽象接口）

在 DOM 的庞大体系中并非所有节点都以可见的标签形式存在。当我们操作一段文本、一条注释甚至一条处理指令时背后都有一个共同的基类在默默提供支持。这个基类就是 CharacterData。它是一个抽象接口意味着你不会在代码中直接创建 CharacterData 类型的对象但它提供的属性和方法却贯穿于我们日常对文本节点的所有操作之中。本文将深入剖析 CharacterData 接口的体系结构并逐一展示其属性和方法的具体用法。一、CharacterData 的抽象本质与接口地位CharacterData 代表 Node 对象中包含的字符数据。它的核心定位是作为一个抽象接口不独立存在而是由其他具体接口来实现。这些具体接口包括 Text文本节点、Comment注释节点和 ProcessingInstruction处理指令节点。在上一篇文章中学习的 CDATASection其继承链中也包含了 CharacterData。理解这一点就能明白为什么操作一个文本节点和操作一条注释节点会拥有相似的 API。因为它们共享着从 CharacterData 继承下来的同一套字符操作方法集。// 创建一段包含文本节点和注释节点的 HTML 片段constcontainerdocument.createElement(div);container.innerHTMLHello World!-- 这是一条注释 --;consttextNodecontainer.childNodes[0];// Hello World 的 Text 节点constcommentNodecontainer.childNodes[1];// 注释节点// 验证两者都继承自 CharacterDataconsole.log(textNodeinstanceofCharacterData);// trueconsole.log(commentNodeinstanceofCharacterData);// true// 说明 Text 和 Comment 都实现了 CharacterData 的属性和方法二、核心属性data 与 length 的使用方式CharacterData 接口定义了两个最基础的属性。第一个是 data它是一个字符串代表该对象中当前存储的全部文本数据。这个属性可读可写允许直接赋值来一次性替换整个文本内容。第二个是 length它是一个只读的数值返回 data 中当前字符的总数。这两个属性是后续所有精细操作方法的基础。通过直接访问 data可以完成最简单的读取与覆盖操作。constdivdocument.createElement(div);div.textContent前端开发学习;consttextNodediv.childNodes[0];// 使用 data 属性读取文本内容console.log(data 属性的值:,textNode.data);// 输出: 前端开发学习// 使用 length 属性获取字符长度console.log(文本长度:,textNode.length);// 输出: 7// 通过 data 属性直接替换全部文本textNode.data后端开发进阶;console.log(替换后的 data:,textNode.data);// 输出: 后端开发进阶console.log(替换后的长度:,textNode.length);// 输出: 6data 属性的读写特性使得全量替换文本变得非常便捷但它缺乏对局部内容进行精细化控制的能力。这时候就需要借助 CharacterData 提供的一系列方法。三、数据追加与插入appendData 与 insertData对于文本的动态拼接需求CharacterData 提供了两个方向上的扩展方法。appendData() 用于在现有数据的末尾追加一段新字符串。调用该方法后data 属性会自动更新为合并后的结果。如果需要更精细的控制在字符串中间的某个特定位置插入新内容则需要使用 insertData()。它接收两个参数第一个是插入位置的偏移量第二个是要插入的字符串。constdivdocument.createElement(div);div.textContent学习HTML;consttextNodediv.childNodes[0];// 使用 appendData 在末尾追加内容textNode.appendData(与CSS);console.log(追加后:,textNode.data);// 输出: 学习HTML与CSS// 使用 insertData 在指定位置插入内容// 在学习两个字之后即偏移量2的位置插入基础textNode.insertData(2,基础);console.log(插入后:,textNode.data);// 输出: 学习基础HTML与CSS// insertData 也可以在末尾达到类似 appendData 的效果textNode.insertData(textNode.length,课程);console.log(末尾插入:,textNode.data);// 输出: 学习基础HTML与CSS课程insertData 的偏移量计算基于零开始的索引位置。如果索引刚好等于 length效果等同于 appendData。一旦索引超出长度则会抛出错误。四、数据的删除与提取deleteData 与 substringData与追加和插入相对应deleteData() 方法用于从现有数据中移除一部分字符。它接收两个参数起始偏移量和要删除的字符数量。当方法返回时data 包含的是缩短后的字符串。而 substringData() 则相对安全它不会修改原始 data而是返回一个新的字符串内容是从指定起始位置开始、指定长度的子串。这两个方法经常配合使用比如先提取关键内容再从原数据中将其删除实现剪切的效果。constdivdocument.createElement(div);div.textContent2024年前端技术趋势报告;consttextNodediv.childNodes[0];console.log(原始数据:,textNode.data);// 使用 substringData 提取部分文本不修改原始数据constyearParttextNode.substringData(0,4);consttopicParttextNode.substringData(5,4);console.log(提取年份:,yearPart);// 输出: 2024console.log(提取主题:,topicPart);// 输出: 前端技术console.log(提取后原数据不变:,textNode.data);// 原样// 使用 deleteData 删除前5个字符 2024年textNode.deleteData(0,5);console.log(删除后:,textNode.data);// 输出: 前端技术趋势报告// 再次删除从位置2开始删除4个字符 技术趋势textNode.deleteData(2,4);console.log(再次删除后:,textNode.data);// 输出: 前端报告五、数据的精准替换replaceData当需要对文本中的某一小段进行精准替换时单独调用 deleteData 然后再调用 insertData 会显得繁琐。replaceData() 方法正是为此场景设计。它接收三个参数起始偏移量、要替换的字符数量以及用于替换的新字符串。该方法将删除和插入合并为一次原子操作。在底层逻辑上先移除从偏移量开始的指定数量旧字符再将新字符串插入到相同位置。constdivdocument.createElement(div);div.textContent欢迎学习JavaScript基础;consttextNodediv.childNodes[0];console.log(替换前:,textNode.data);// 将 JavaScript 替换为 TypeScript// JavaScript 位于偏移量4的位置长度为10textNode.replaceData(4,10,TypeScript);console.log(第一次替换后:,textNode.data);// 输出: 欢迎学习TypeScript基础// 将 基础 替换为 高级编程// 基础 位于偏移量14的位置长度为2textNode.replaceData(14,2,高级编程);console.log(第二次替换后:,textNode.data);// 输出: 欢迎学习TypeScript高级编程六、节点移除与兄弟元素导航remove 及扩展属性除了操作自身字符内容的方法CharacterData 从其实现的 ChildNode 和 NonDocumentTypeChildNode 接口中也获得了重要能力。来自 ChildNode 的 remove() 方法可以将节点自身从其父节点的子节点列表中移除。这个方法没有参数调用后节点直接从 DOM 树中消失。而 nextElementSibling 和 previousElementSibling 这两个来自 NonDocumentTypeChildNode 的属性则专门用于元素兄弟节点的导航。它们与 nextSibling 和 previousSibling 的区别在于后者可能返回文本节点或注释节点而带 Element 字样的属性会跳过所有非元素节点直接返回下一个或上一个 Element 类型的兄弟节点。// 构建一段测试结构constuldocument.createElement(ul);ul.innerHTMLli项目A/li!-- 分隔注释 --li项目B/lili项目C/li;document.body.appendChild(ul);constfirstLiul.children[0];// 第一个 li 元素constcommentNodeul.childNodes[1];// 注释节点// 注释节点也实现了 CharacterDataconsole.log(注释内容:,commentNode.data);// 注释节点的兄弟元素导航console.log(注释的上一个元素兄弟:,commentNode.previousElementSibling.textContent);// 项目Aconsole.log(注释的下一个元素兄弟:,commentNode.nextElementSibling.textContent);// 项目B// 使用 remove 方法移除注释节点commentNode.remove();console.log(移除后ul的子节点数量:,ul.childNodes.length);// 从5减为4通过对 CharacterData 抽象接口的全面解读可以清晰地看到它如何为文本节点、注释节点等具体实现提供一套统一而强大的字符操作能力。掌握这些方法意味着无论面对何种形式的字符节点我们都能用一致的 API 进行读取、追加、插入、删除、替换和遍历这为 DOM 编程提供了极大的灵活性和规范性。想要解锁更多HTML 核心标签实战、前端零基础入门干货、开发避坑全指南吗持续关注后续将更新CSS 布局实战、JavaScript 交互基础、全站导航开发等硬核内容带你从新手快速进阶轻松搞定前端开发