DOM树遍历与过滤-优快云博客

本文链接：https://blog.youkuaiyun.com/ppwwp/article/details/88092928

1、遍历
2、向上遍历dom树
3、向下遍历dom树
4、在dom树中水平遍历
5、过滤

1、遍历 我理解的遍历就是根据一个结构中的一个点就可以找到整个结构的所有的东西。

2、向上遍历dom树

parent()只会返回被选择元素的直接父元素
parents() 方法返回被选择元素所有祖先元素，它一路上直到文档的跟元素<html>
您也可以使用可选参数来过滤对祖先元素的搜索。

 $("span").parents("ul");

parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

 $("span").parentsUntil("div");

3、向下遍历dom树
children()
find()

 $("div").children();

您也可以使用可选参数来过滤对子元素的搜索。

下面的例子返回类名为 “1” 的所有 <p> 元素，并且它们是 <div> 的直接子元素：

 $("div").children("p.1");

下面的例子返回属于 <div> 后代的所有 <span> 元素：

$("div").find("span");

下面的例子返回 <div> 的所有后代：

$("div").find("*");

4、在dom树种水平遍历
有许多有用的方法让我们在dom树进行水平遍历
siblings()
next()
nextAll()
nextUntil()
prev()
prevAll()
prevUntil()

 $("h2").siblings();
 $("h2").siblings("p");//可以有参数

5、过滤
缩小搜索元素的范围,三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。

$("div p").first();

$("div p").last();

eq() 方法返回被选元素中带有指定索引号的元素。索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个 <p> 元素（索引号 1）：

$(“p”).eq(1);
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。下面的例子返回带有类名 “url” 的所有 <p> 元素：