DOM——遍历.parent()、.parents()、.closest()和.next()

简介:

      遍历.parent()、.parents()、.closest()和.next()

1   .parent()快速查找合集里面的每一个元素的父元素,即父亲与儿子的关系,因为是父元素,所以只会向上查找一级

2   .parent()无参数,能够在DOM树中搜索到这些元素的父级元素,有序的向上匹配元素,并根据匹配的元素创建一个新的JQuery对象

3   .parent()选择性地接受同一型选择器表达式,需要对这个合集对象进行一定的筛选,找出目标元素,允许传一个选择器的表达式

4   .parents()可以快速查找合集里面的每一个元素的所有祖辈元素,

5   .parents()无参数,选择性地接受同一型选择器表达式,返回的元素秩序是从离他们最近的父级元素开始的

6   .parents()能够在DOM树中搜索到这些元素的祖先元素,有序的向上匹配元素,并根据匹配的元素创建一个新的JQuery对象

7   .parents()需要对这个合集对象进行一定的筛选,找出目标元素,允许传一个选择器的表达式

8   .parents()和.parent()的区别

   .parent()只会查找一级,只进行一个单级DOM树查找,返回一个包含document的集合

   .parents()会往上一直查找到祖先节点,返回一个空集合

9   .closest()接受一个匹配元素的选择器字符串,从元素本身开始,在DOM树上逐级向上级元素匹配,并返回最先匹配的祖先元素

10   .closest()查找当前元素的父辈祖辈元素,给定的JQuery集合或元素来过滤元素,匹配合集中每一个元素的祖先元素,需要对这个合集对象进行一定的筛选,找出目标,允许传一个JQuery的对象

11   .parents()和.closest()的区别

   起始位置

   .parents()开始于父元素

   .closest()开始于当前元素

   便利的目标

   .parents()遍历到文档根元素,一直查找到根元素,并将匹配的元素加入集合

   .closest()要找到指定的目标,向上查找直到找到一个匹配的就停止查找

   结果

   .parents()返回的是包含零个或多个元素的JQuery对象

   .closest()返回的是包含零个或一个元素的JQuery对象

12   .next()无参数,可以快速查找指定元素集合中每一个元素紧邻的后面同辈元素的元素集合,找遍元素集合中紧跟着这些元素的直接兄弟元素,并根据匹配的元素创建一个新的JQuery对象

13   .next()匹配合集中每一个元素的下一个兄弟元素,选择性的接受同一类选择器表达式,需要对这个合集对象进行一定的筛选,找出目标,允许传一个选择器的表达式


本文转自 拉考的考拉 51CTO博客,原文链接:http://blog.51cto.com/lakaodekaola/2044143


相关文章
|
3天前
|
XML 存储 JavaScript
DOM 节点遍历:掌握遍历 XML文档结构和内容的技巧
**XML DOM 遍历、操作和导航概述** - 遍历XML节点树用于提取信息,例如,通过JavaScript的DOM API循环`<book>`子节点显示名称和值。 - DOM解析器处理XML文本数据,包括解析字符数据(PCDATA)和识别CDATA段。 - 节点导航涉及`parentNode`、`childNodes`等属性,`get_nextSibling`等辅助函数避免空文本节点。 - `getElementsByTagName`、`getAttribute`和`nodeValue`用于检索元素、属性值和文本。
43 6
DOM 节点遍历:掌握遍历 XML文档结构和内容的技巧
|
3天前
|
存储 JavaScript 数据可视化
vue3+echarts应用——深度遍历html的dom结构并用树图进行可视化
vue3+echarts应用——深度遍历html的dom结构并用树图进行可视化
44 1
|
3天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
该文介绍了如何遍历XML文档的DOM节点树。通过循环节点,可以访问并处理每个元素,如提取值。示例代码展示了加载XML字符串到`xmlDoc`后,遍历根元素的所有子节点,打印出节点名及文本值,例如:"title: Everyday Italian"、"author: Giada De Laurentiis"和"year: 2005"。
|
3天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
该文介绍了如何遍历XML文档的节点树。通过循环移动,可以访问每个元素并提取其值。示例代码展示了一个XML文档的遍历过程,输出了所有子节点的名称和值,如"title: Everyday Italian"等。首先加载XML到xmlDoc,然后获取根元素的子节点,并依次打印节点名及文本内容。
|
3天前
|
XML JavaScript 前端开发
XML DOM 遍历节点树
该示例展示了如何遍历XML文档的节点树。通过DOMParser解析XML字符串得到xmlDoc,然后遍历根节点的子节点,显示每个节点的名称及其文本值。输出结果为:"title: Everyday Italian", "author: Giada De Laurentiis", "year: 2005"。代码使用JavaScript实现,循环遍历并更新HTML元素`<p id="demo"></p>`的内容。
|
3天前
|
JavaScript 小程序
遍历类数组之获取多个dom节点并遍历
遍历类数组之获取多个dom节点并遍历
|
JavaScript 前端开发
JavaScript中DOM节点的查找(遍历)
JavaScript中DOM节点的查找(遍历) 这篇文章讲一下DOM节点的查找,即DOM节点的遍历。说道遍历大家应该不陌生了,在js中,通过DOM节点的遍历,我么可以通过任意一个元素找到另外的任意一个元素。前期把这个学到位,到了后期开始学习jQuery时会感觉方便很多。 整个DOM中,节点与节点之间的关系只有两种,兄弟(同胞)关系和父子关系。遍历节点用到的属性也主要是这个两类。 HTML代码: <div class="wrap" style="position:relative"> <div class="box"> 盒子01
|
JavaScript 前端开发
JS DOM之DOM遍历
1.什么是DOM遍历? DOM遍历,可以简单地理解为“查找元素”。举个例子,如果你使用getElementById()等方法获取一个元素,然后又想得到该元素的父元素、子元素,甚至是下一个兄弟元素,这种操作涉及的就是DOM遍历 2.查找父元素 在JavaScript中,我们可以使用parentNode属性来获得某个元素的父元素
87 0
JS DOM之DOM遍历
|
JavaScript 前端开发
JavaScript 然后遍历dom时报错 forEach is not a function
JavaScript 然后遍历dom时报错 forEach is not a function
322 2
|
JavaScript
VUE element-ui之el-tree树形控件循环遍历渲染dom节点;子节点横向排列;控件添加指示线
VUE element-ui之el-tree树形控件循环遍历渲染dom节点;子节点横向排列;控件添加指示线
770 0
VUE element-ui之el-tree树形控件循环遍历渲染dom节点;子节点横向排列;控件添加指示线