关于父子节点、父子元素、祖辈元素的获取

最新推荐文章于 2024-01-16 21:55:25 发布
最新推荐文章于 2024-01-16 21:55:25 发布
阅读量1.7k 收藏
点赞数
分类专栏： Jquery 文章标签： js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WhaleFallljf/article/details/109427577
版权
本文介绍了如何在JavaScript和jQuery中获取DOM元素的父子节点和祖辈元素。通过JS写法和jQuery的parents()、parent()、find()方法，详细阐述了元素选择和遍历的过程。同时，探讨了元素与节点的区别，强调节点包含元素的属性和文本内容，而元素主要指代HTML标签。
摘要由CSDN通过智能技术生成

关于父子节点、父子元素、祖辈元素的获取

我们可以通过下面这种js的写法来分析怎么来获取元素的

获取当前元素的父元素的父元素的第二个子元素中的第一个子元素中的第一个子元素

1、JS写法解释

是不是感觉这句话很绕，但是这句话的逻辑就是这样的，因为hildern指的是返回当前元素的所有元素节点，所以你需要选中那个的话你只需要去获取这个元素的下标就可以直接获取你需要元素的位置了

2、Jq写法解释

Jquery的写法就真的是简单粗暴，就直接获取你某个父元素，获取完了你的这个父元素之后，就直接通过一个find方法就直接差找这个父元素下面你需要的这个子元素就很简单粗暴两步直接走完

jQuery 遍历 - parents() 方法

Jquery的parent和parents(找到某一特定的祖先元素)

jQuery find() 方法

整理dom 获取当前元素的兄弟节点/父节点/子节点/筛选元素

获得当前匹配元素集合中每个元素的祖先元素，使用选择器进行筛选是可选的。是可以去定位搜索你需要的元素的方法

3、JS里面的元素与节点的区分(个人理解)

就例如一

最低0.47元/天 解锁文章
一只像咸鱼的小鲸鱼.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS获取节点的兄弟，父级，子级元素
hellogull
05-14 59万+
先说一下JS的获取方法，其要比JQUERY的方法麻烦很多，后面以JQUERY的方法作对比。 JS的方法会比JQUERY麻烦很多，主要则是因为FF浏览器，FF浏览器会把你的换行也当最DOM元素 原生的JS获取ID为test的元素下的子元素。可以用： var a = docuemnt.getElementById("test").getElementsByTagName("div
获取祖先元素和后代元素
qq_29469441的博客
05-20 2626
一、获取祖先元素 1、获取直接父级    语法： $(selector).parent();//获取元素的直接父级元素 2、获取元素的所有祖先元素    语法： $(selector).parents([selector]);//后面加上选择器可以过滤祖先元素 3、获取某个元素到某个元素间的所有父级元素    语法：
js进阶 11-16 jquery如何查找元素的父亲、祖先和子代、后代
weixin_34127717的博客
06-26 418
js进阶 11-16 jquery如何查找元素的父亲、祖先和子代、后代 一、总结 一句话总结：过滤或者查找的方法里面可以带参数进行进一步的选择。   1、parent()和parents()方法的区别是什么（父亲和祖先）？ parent()找父亲，parents()找祖先 父亲只有一个，所以是单数，祖先就有很多个了，所以是复数 parent() 获得当前匹配元素集合中每个元素的父...
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
10-22
本文给大家简单总结了下JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法，非常的简单实用，有需要的小伙伴可以参考下
[js] 获取给定节点的所有祖先节点 (有parentId)
qq_14993591的博客
06-01 1152
然后再找到 ID 为 3 的节点，它的父节点是 ID 为 1 的节点，添加到数组的首位。首先找到 ID 为 8 的节点，它的父节点是 ID 为 3 的节点，添加到数组的首位。例如，假设我们要获取 ID 为 8 的节点的所有祖先节点。最后找到 ID 为 1 的节点，由于它已经是根节点，因此循环结束。返回包含 ID 为 3 和 ID 为 1 的节点的数组。，这就是 ID 为 8 的节点的所有祖先节点。
每天学习十分钟25之jQuery
小天一直在路上
03-14 387
jquery遍历之parent()和parents()的区别.parent(selector) 获得当前匹配元素集合中每个元素的父元素，由选择器筛选（可选）。 .parents(selector) 获得当前匹配元素集合中每个元素的祖先元素，由选择器筛选（可选）。参考文献： jQuery 遍历 - parent() 方法 jQuery 遍历 - parents() 方法知识点延伸：parent
jQuery与javascript对照学习 获取父子前后元素 实现代码
10-29
jQuery与javascript对照学习(获取父子前后元素) ，需要的朋友可以参考下，看看与js有什么不同。
使用jquery/js获取iframe父子级、同级获取元素的方法
10-21
下面小编就为大家带来一篇使用jquery/js获取iframe父子级、同级获取元素的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
父子节点获取
04-09
"父子节点获取"是处理这种结构时的关键操作，它涉及到如何从数据表中检索并组织这些关系。在这个场景中，我们讨论的是如何在同一个数据表中管理父子节点，并通过工具类和实现类来实现这一功能。 首先，我们要理解树...
jquery的父子兄弟节点查找示例代码
10-26
主要介绍了jquery的父子兄弟节点的查找方法,需要的朋友可以参考下
js中查找最近的共有祖先元素的实现代码
01-19
先来看概念，首先DOM是一棵树，其根节点是Document，大致可以用下图来表示： 所谓“最近的共有祖先元素”，是指给定一系列元素，找出在树中深度最大的，但同时为所有这些元素的祖先元素的元素。 比如上图中，I和G的结果为C，G和H的结果为A，D和E的结果为html，C和B的结果为html等。 测试驱动 对于偏逻辑的题，并没有十足的把握函数是正确的，因此还是先构造测试的用命，力求让函数通过测试。 本次就以上图的结构作为DOM结构，A表示body，B表示head，其他节点均使用div元素，同时以上文中所说的作为测试的输入和输出，先构造一下测试： 代码如下: function test() { v
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
01-19
本文实例讲述了jQuery获取父元素节点、子元素节点及兄弟元素节点的方法。分享给大家供大家参考，具体如下： 先来看这段html代码，整个取节点（父、子、兄弟等）的方法都是围绕这段代码来的： <ul class=par> <li id=firstli> <h3 class=title>条目一</h3> <ul class=par> <li id=dwtedx>第一项</li> <li>第二项</li> </ul> </li> </ul> JQUERY 父节点的获取： jquery获取父元素方法比较多、比如parent
父子节点创建树问题源码
07-21
例如，如果输入数据是一个列表，其中每个元素包含父节点值和子节点值的对，我们可以用如下方式创建树： ```python def create_tree(parent_child_pairs): # 创建一个字典存储节点及其子节点 node_dict = {} for ...
jQuery父级以及同级元素查找介绍
萧刚
02-18 805
jQuery.parent(expr) 找父亲节点，可以传入expr进行过滤，比如$("span").parent()或者$("span").parent(".class") jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素，不限于父元素 jQuery.children(expr).返回所有子节点，这个方法只会返回直
JavaScript：封装返回元素第n层祖先元素节点的函数
lvh98的博客
07-06 350
封装返回元素第n层祖先元素节点的函数
JS获取DOM节点
shijie
10-29 1078
1.js获取子节点 2.js获取父节点 3.js获取兄弟节点
js中如何从tree数据中找出某一项以及父级和祖先级
最新发布
BradenHan的专栏
01-16 1585
TOC/TOC。
操作元素之修改样式属性
leechoy
06-12 628
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>..
js 获取当前元素的父元素的父元素的id
热门推荐
weixin_38383877的博客
12-27 3万+
 情景一：用onclick触发的函数 html代码： &lt;div id="0" style="border-bottom:1px solid #000;margin:0 auto;"&gt; &lt;div&gt;1111&lt;/div&gt; &lt;div class="original"&gt; &lt;div id="
定位界面元素 兄弟元素 父子元素
06-06
好的，您的问题是关于定位界面元素、兄弟元素和父子元素的。我可以为您解答。 在 HTML 和 CSS 中，我们可以使用选择器来定位页面元素。选择器可以根据元素的标签名、类名、ID 等属性来选择元素。例如，如果我们想选中一个页面中的所有段落元素，可以使用以下选择器： ``` p { /* CSS 样式 */ } ``` 选择器中的 `{}` 内就是我们要对这些元素设置的样式。这些样式可以是颜色、字体、布局等等。 接下来，我们来看看兄弟元素和父子元素的概念。 兄弟元素是指在 HTML 结构中处于同一级别的元素。例如，以下 HTML 代码中的三个 div 元素就是兄弟元素： ``` <div></div> <div></div> <div></div> ``` 我们可以使用 CSS 中的兄弟选择器来选中某个兄弟元素。例如，如果我们想选中第二个 div 元素，可以使用以下选择器： ``` div:nth-of-type(2) { /* CSS 样式 */ } ``` 这个选择器中的 `:nth-of-type(2)` 表示选择第二个 div 元素。 父子元素是指在 HTML 结构中，某个元素是另一个元素的直接子元素。例如，以下 HTML 代码中的 div 元素就是 p 元素的父元素： ``` <div> <p></p> </div> ``` 我们可以使用 CSS 中的子元素选择器来选中某个父子元素中的子元素。例如，如果我们想选中 div 元素中的 p 元素，可以使用以下选择器： ``` div > p { /* CSS 样式 */ } ``` 这个选择器中的 `>` 表示选择 div 元素中的直接子元素 p 元素。 希望这个解答能够帮助到您，如果您还有其他问题，请随时提出。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值