HTML DOM del 对象（一文讲透）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在网页开发中，HTML DOM（文档对象模型）为开发者提供了操作网页元素的强大工具。其中，del 标签用于标记文档中被删除的内容，而 HTML DOM del 对象 则是通过 JavaScript 访问和修改这些删除内容的关键接口。无论是展示历史版本对比、实现动态内容更新，还是构建协作编辑工具，掌握 del 对象的用法都至关重要。本文将从基础概念、核心属性与方法、实际应用场景等维度，逐步解析这一知识点，并通过案例演示其具体实现。

一、HTML DOM del 对象的基础概念

1.1 del 标签的作用与意义

del 标签是 HTML 中用于表示文档中被删除内容的标准标签。例如，在版本控制、历史记录展示或需要突出显示修改内容的场景中，开发者可以通过 del 标签将旧文本包裹起来，同时结合 ins 标签（表示新增内容）形成对比。

示例代码：

<p>原始文本：这个产品价格为 <del>¥500</del>，现调整为 <ins>¥450</ins>。</p>

1.2 DOM 中的 del 对象

当网页加载完成后，浏览器会将 HTML 文档解析为 DOM 树结构。此时，每个 del 标签都会对应一个 HTML DOM del 对象，允许通过 JavaScript 进行动态操作。例如：

const deletedText = document.querySelector("del");
console.log(deletedText.textContent); // 输出被删除的文本内容

二、HTML DOM del 对象的核心属性与方法

2.1 核心属性详解

del 对象继承自 HTML 元素的通用属性，同时具备以下特定属性：

示例代码：

<p>此段文字已被删除：<del cite="https://example.com/reason" dateTime="2023-10-01T14:30:00Z">...</del></p>

2.2 常用方法与操作

通过 del 对象，开发者可以实现以下操作：

• 修改内容：通过 textContent 或 innerHTML 属性动态更新被删除文本。
• 添加样式：使用 style 属性为删除内容添加视觉效果（如背景色或边框）。
• 事件监听：通过 addEventListener 监听用户对删除内容的交互行为（如点击或悬停）。

案例：动态修改删除文本

// 获取第一个 del 元素
const deletedElement = document.querySelector("del");
// 更新内容并添加样式
deletedElement.textContent = "新删除的文本";
deletedElement.style.backgroundColor = "rgba(255, 0, 0, 0.2)";

2.3 属性与方法的组合应用

结合 cite 和 dateTime 属性，可以构建更丰富的信息展示场景。例如，通过 JavaScript 动态生成删除说明：

function showDeletionInfo(element) {
  const citeUrl = element.getAttribute("cite");
  const deletionTime = element.getAttribute("dateTime");
  alert(`该内容删除于 ${deletionTime}，原因详见 ${citeUrl}`);
}

// 为所有 del 元素绑定点击事件
document.querySelectorAll("del").forEach(el => {
  el.addEventListener("click", () => showDeletionInfo(el));
});

三、HTML DOM del 对象的实际应用场景

3.1 版本控制与历史记录展示

在文档编辑器或协作工具中，del 对象可用于标记被删除的文本，并结合 ins 标签展示修改后的版本。例如：

<div class="history-record">
  <del dateTime="2023-10-01">旧文本内容</del>
  <ins dateTime="2023-10-02">新文本内容</ins>
</div>

通过 CSS 样式区分新旧内容：

del { text-decoration: line-through; color: red; }
ins { background-color: lightgreen; }

3.2 动态内容更新与用户反馈

在实时协作编辑场景中，可以利用 del 对象实现“撤销”功能。例如：

let history = [];
function deleteText(element) {
  history.push(element.textContent);
  element.textContent = "";
  element.style.display = "none";
}

// 撤销操作
function undoDelete() {
  const lastDeleted = history.pop();
  const delElement = document.querySelector("del");
  delElement.textContent = lastDeleted;
  delElement.style.display = "inline";
}

3.3 结合表单与用户输入

在表单验证场景中，若用户输入的内容违反规则（如包含敏感词），可通过 del 标签高亮显示被过滤的部分：

function validateInput(inputElement) {
  const value = inputElement.value;
  if (value.includes("敏感词")) {
    const filtered = value.replace("敏感词", "<del>敏感词</del>");
    inputElement.value = filtered;
    // 通过 DOM 操作将 del 标签渲染到页面
  }
}

四、进阶技巧与常见问题解答

4.1 如何遍历所有 del 元素？

通过 document.querySelectorAll("del") 可以获取所有 del 元素的集合，并使用 forEach 进行批量操作：

document.querySelectorAll("del").forEach((element, index) => {
  console.log(`第 ${index + 1} 个删除内容：${element.textContent}`);
});

4.2 如何处理跨浏览器兼容性？

del 标签及其属性在主流浏览器中均良好支持。若需兼容旧版 IE 浏览器，可通过条件注释或 Polyfill 实现基础功能。

4.3 如何避免滥用 del 标签？

del 标签应仅用于标记文档内容的实际删除记录，而非单纯实现文本样式效果。滥用可能导致语义混乱，影响 SEO 和可访问性。

五、总结与展望

通过本文的讲解，读者应已掌握 HTML DOM del 对象 的核心概念、属性方法及应用场景。从基础的文本标记到动态交互实现，这一工具为网页开发提供了丰富的可能性。未来，随着 Web 开发技术的演进，结合 CSS 自定义属性、Web Components 等新技术，del 对象的应用场景将进一步扩展，例如在实时协作编辑、版本控制系统中发挥更关键的作用。

建议读者通过实际项目练习，例如构建一个简易的文本编辑器，尝试实现删除内容的高亮、历史记录回溯等功能，从而加深对 HTML DOM del 对象 的理解与应用能力。