jQuery 遍历后代知识点详解
专为编程小白准备的通俗易懂指南，掌握DOM树中查找元素的核心技巧
什么是DOM树和后代？
可以把HTML文档想象成一棵倒立的树：
document (根节点)
└── html
├── head
└── body
├── header
├── main
└── footer
后代元素：在某个元素内部的所有元素，无论嵌套多深都算后代。
举例：body元素的后代包括header、main、footer以及它们内部的所有元素。
💡 打个比方：DOM树就像家族族谱，后代就是某个人的子女、孙子女、曾孙子女等所有后代。
children() 方法
作用
获取当前元素的所有直接子元素（只查找一层深度）。
代码示例
// 获取id为parent的所有直接子元素
$(“#parent”).children();
// 获取class为container的所有直接子元素中带有active类的元素
$(“.container”).children(“.active”);
$(“#parent”).children();
// 获取class为container的所有直接子元素中带有active类的元素
$(“.container”).children(“.active”);
特点
- 只查找下一级元素（孩子），不找孙子辈
- 速度较快，因为查找范围小
- 可以添加选择器进行过滤
📌 注意：children() 只查找直接子元素，不会查找文本节点或注释节点。
find() 方法
作用
获取当前元素的所有后代元素（查找所有嵌套层级）。
代码示例
// 获取id为main的所有后代中的p元素
$(“#main”).find(“p”);
// 获取class为menu的所有后代中带有active类的li元素
$(“.menu”).find(“li.active”);
$(“#main”).find(“p”);
// 获取class为menu的所有后代中带有active类的li元素
$(“.menu”).find(“li.active”);
特点
- 查找所有后代元素（孩子、孙子…）
- 功能强大，使用频率高
- 必须传入选择器参数
- 相比children()稍慢（但实际使用中区别很小）
💡 提示：find() 是开发中最常用的DOM查找方法之一，特别是在组件化开发中。
children() vs find() 区别
关键区别
两者最大的区别在于查找的深度：
- children()：只查找直接子元素（一级深度）
- find()：查找所有后代元素（任意深度）
类比理解
想象一个大家庭：
- children() 相当于找某人的子女
- find() 相当于找某人的所有后代（子女、孙子女、曾孙子女等）
选择建议
当你知道目标元素就在直接子元素中时，使用 children() 更高效。当目标元素可能在任意嵌套层级时，使用 find()。
其他相关方法
contents()
获取所有子节点，包括文本节点和注释节点（children()只返回元素节点）。
// 获取所有子节点
$(“#element”).contents();
$(“#element”).contents();
has()
筛选出包含特定后代的元素。
// 获取包含p元素的div
$(“div”).has(“p”);
$(“div”).has(“p”);
过滤方法
在处理后代集合时常用的方法：
- eq()：获取指定索引位置的元素
- first()：获取第一个元素
- last()：获取最后一个元素
- filter()：根据条件过滤元素
交互式演示
在下面的DOM树结构中尝试不同的遍历方法，查看效果：
DOM树结构：
- #container (祖先元素)
- header.header
- h1.title
- nav.navigation
- a.link (首页)
- a.link.active (产品)
- a.link (联系我们)
- main.content
- section.article
- h2
- p.text
- p.text
- section.article.featured
- h2
- p.text.highlight
- section.article
- footer.footer
- p.copyright
- header.header
操作方法：
操作结果将显示在这里…