异常教程

jQuery contents() 方法（千字长文）

更新时间:

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

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

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

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

在网页开发中，DOM（文档对象模型）操作是前端开发者的核心技能之一。jQuery contents() 方法作为 jQuery 库中用于获取元素子节点的实用工具，常被开发者低估其潜力。本文将通过循序渐进的方式，从基础概念到实战案例，系统解析这一方法的使用场景与技巧，帮助读者掌握如何高效操作 DOM 结构。无论是刚接触 jQuery 的新手，还是希望优化代码逻辑的中级开发者，都能从中获得启发。

一、理解 contents() 的核心功能

jQuery contents() 方法的核心作用是获取指定元素的所有子节点，包括元素节点、文本节点、注释节点等。与 jQuery 的 children() 方法不同，contents() 不仅包含直接子元素（元素节点），还会捕获文本、注释等非元素节点。

比喻解析：

可以将网页比作一个书架，每个元素（如 <div>、<p>）是书架上的书。children() 方法类似“只取书架上最顶层的书籍”，而 contents() 则会“连同书架上的灰尘、标签纸等所有可见和不可见的内容一并收集”。这种差异在处理复杂 DOM 结构时至关重要。

基础语法

$(selector).contents([index]);
  • selector：目标元素的选择器。
  • index（可选）：获取特定子节点的索引（从0开始）。

示例1：获取所有子节点

<div id="container">
  <p>第一个段落</p>
  <span>第二个元素</span>
  Text Node <!-- 注意这里的纯文本节点 -->
</div>

<script>
  $("#container").contents().each(function() {
    console.log(this.nodeType); // 输出：1（元素节点）、1、3（文本节点）
  });
</script>

二、深入解析 contents() 的特性

1. 返回的节点类型

contents() 返回的节点类型包括以下三类：
| 节点类型 | 描述 | 示例 |
|---------|------|------|
| 1 | 元素节点（如 <div>、<a>） | <p>内容</p> |
| 3 | 文本节点（纯文本内容） | "你好" |
| 8 | 注释节点（<!-- 注释 -->） | <!-- 这是注释 --> |

通过 nodeType 属性可区分节点类型，这在过滤节点时非常实用。

2. 与 children() 的对比

// children() 仅获取元素节点
$("#container").children().length; // 输出：2（p 和 span）  
$("#container").contents().length; // 输出：3（包含文本节点）

3. 处理文本节点的技巧

文本节点常因空格或换行被忽略，但 contents() 会将其捕获。例如：

<div id="text-node-example">
  前文本 <!-- 空格 -->
  <span>中间元素</span>
  后文本
</div>

<script>
  $("#text-node-example").contents().each(function() {
    if (this.nodeType === 3) {
      console.log("文本内容：" + this.textContent.trim()); // 输出 "前文本" 和 "后文本"
    }
  });
</script>

三、实战案例：contents() 的应用场景

案例1：动态生成内容的遍历

假设需要遍历富文本编辑器（如 CKEditor）的内容：

// 获取编辑器的 iframe 内容
var $iframeContent = $("#editor").contents().find("body");  
$iframeContent.find("img").each(function() {  
  console.log("图片路径：" + $(this).attr("src"));  
});

案例2：表单验证中的文本节点过滤

在表单提交前，若需检查输入框是否包含非元素内容：

<textarea id="user-input">
  <script>alert("恶意代码")</script>
  用户输入内容
</textarea>

<script>
  $("#user-input").contents().each(function() {
    if (this.nodeType === 3) {
      // 过滤脚本标签，保留文本
      console.log("安全文本：" + this.textContent);
    }
  });
</script>

案例3：结合其他 jQuery 方法

与 filter() 联合使用，精准筛选节点：

// 获取所有文本节点并合并内容
var textContent = $("#container").contents()
  .filter(function() { return this.nodeType === 3; })
  .map(function() { return this.textContent.trim(); })
  .get()
  .join(" "); // 输出合并后的文本

四、常见问题与解决方案

Q1：如何排除空白文本节点？

某些文本节点可能仅包含空格或换行符，可通过 trim() 或正则表达式过滤：

// 筛选非空文本节点
$("#container").contents().filter(function() {
  return this.nodeType === 3 && $.trim(this.textContent).length > 0;
});

Q2：与 find() 方法的区别？

contents() 获取直接子节点，而 find() 会递归查找所有后代节点。例如：

$("#parent").contents() // 直接子节点  
$("#parent").find("*") // 所有后代元素节点

Q3：如何操作注释节点？

通过 nodeType === 8 可定位注释节点：

// 移除所有注释节点
$("#container").contents().each(function() {
  if (this.nodeType === 8) {
    $(this).remove();
  }
});

五、进阶技巧与性能优化

1. 结合 get() 获取原生节点

当需要直接操作原生 DOM 节点时：

var firstNode = $("#container").contents().get(0); // 获取第一个子节点的原生对象

2. 处理动态加载内容

若内容通过 AJAX 动态加载，需确保在内容加载完成后调用：

$.get("data.html", function(data) {
  var $content = $(data).contents(); // 处理返回的 HTML 内容
});

3. 性能注意事项

避免对大量节点进行循环操作，必要时使用 filter() 缩小范围：

// 优化前：遍历所有节点  
$("#container").contents().each(...);  

// 优化后：仅处理元素节点  
$("#container").contents().filter(function() {
  return this.nodeType === 1;
}).each(...);

六、与其他 DOM 方法的协同

1. 与 append() 结合

将子节点移动或复制到其他容器：

$("#target").append($("#source").contents()); // 将 source 的所有子节点移动到 target

2. 与 wrap() 联合使用

为文本节点添加包裹元素：

$("#container").contents().each(function() {
  if (this.nodeType === 3) {
    $(this).wrap("<span class='text-node'></span>");
  }
});

结论

jQuery contents() 方法是 DOM 操作中一把灵活的“万能钥匙”，不仅能处理常规元素节点，还能精准捕获文本、注释等隐藏内容。通过本文的解析与案例，读者应能掌握其核心逻辑与应用场景。建议在开发中结合 filter()、each() 等方法，逐步优化代码的健壮性与性能。未来，随着对 jQuery 方法的深入学习，开发者可进一步探索 clone()、unwrap() 等高级操作，提升复杂场景下的 DOM 操控能力。

通过本文的系统学习，读者不仅能解决具体技术问题，更能培养对 DOM 结构的全局理解，为构建高效、可维护的前端应用奠定坚实基础。

最新发布

查看更多文章