原生js获取子节点和孙节点的方法

blueBings

已于 2022-02-10 19:08:12 修改

阅读量2.6k

点赞数 1

分类专栏： js 文章标签： javascript 开发语言 ecmascript js获取孙节点原生js获取孙节点

于 2022-01-22 10:49:02 首次发布

本文链接：https://blog.csdn.net/mentalitys/article/details/122634171

版权

js 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

setRange(e) {
  console.log(e.childNodes)
  console.log(e.parentNode.children[0].children[0].children[0].innerText) 
},

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

blueBings

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
原生js获取子节点和孙节点的方法

原生js获取子节点和孙节点的方法
复制链接

扫一扫

专栏目录

js获取html节点的子节点,Js 获取HTML DOM节点元素的方法小结

weixin_35569158的博客

06-08

1208

Js 获取HTML DOM节点元素的方法小结如何获取要更新的元素，是首先要解决的问题。令人欣慰的是，使用JavaScript获取节点的方法有很多种，这里简单做一下总结(以下方法在IE7和Firefox2.0.0.11测试通过)1. 通过顶层document节点获取：(1) document.getElementById(elementId) ：该方法通过节点的ID，可以准确获得需要的元素，是比较简...

原生JS获取DOM元素节点的方法总结

traceur0529的博客

07-11

2386

前言（日常废话）本篇文章记录了本人所知道的用原生JS来获取到DOM元素节点的几种办法，做个记录，加深记忆，方便以后复习。正文本文所做演示基于下面的HTML结构：本文内容通过个人理解的分类进行归纳总结，大致的目录骨架如下：目录一、通过document顶层方法获取 1、document获取html，head，body标签 1.1、获取html标签 1.2、获取head标签 1.3、获取body标签 2、getElementBy系列获取 2.1、通过ID获取 2.2、通过类名获取 2.

参与评论您还未登录，请先登录后发表或查看评论

原生javascript实现获取指定元素下所有后代元素的方法

10-25

主要介绍了原生javascript实现获取指定元素下所有后代元素的方法,在进行web程序设计时是非常实用的技巧,需要的朋友可以参考下

JS查找孩子节点简单示例

12-08

本文实例讲述了JS查找孩子节点功能。分享给大家供大家参考，具体如下：以前看了JS方面的书，如今用到了，书看得再多，不用就忘了，所以经常用用你所学到的知识，温故知新。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <title>www.jb51.net 查找孩子结点</title> <meta keywords="商品目录"/> <meta description="JS查找孩子节点"/> <script type="text/javascri

[js] 获取指定节点的所有子孙节点 [有parentId ]

qq_14993591的博客

06-01

1359

函数，并把返回的子孙节点数组与当前节点的子节点数组拼接成一个新的数组。最后返回这个新数组。的节点来获取该节点的所有子节点，然后判断子节点的数量是否为0，如果是，则返回空数组。方法返回一个新数组，该数组包含了每个子节点的子孙节点数组，然后。如果有子节点，则对每个子节点递归调用。方法把这些数组合并成一个扁平的数组。这个函数接受两个参数：节点数组。

js jquery 获取父级、子级、兄弟元素(包括祖级、孙级等)

Ink_cherry的博客

04-04

2052

转js或jquery如何获取父级、子级、兄弟元素(包括祖级、孙级等)原生javascript方法：var a = document.getElementById(“dom”); del_space(a); //清理空格 var b = a.childNodes; //获取a的全部子节点； var c = a.parentNode; //获取a的父节点；

children获取孙节点

weixin_46286422的博客

08-06

1349

在这次的项目里，我在用JS克隆标签出现了一个问题，children[i].children控制面板能看到被赋值，结果HTML打印不出来多方查询资料，也没有找到解决方法。最后，仔细研究了JS里children这个方法，我找到了问题的所在。孙节点中只有一个元素，但是，children这个方法是获取一个DOM所有子元素的集合，就算只有一个元素，children获取的也是一个集合。很多人在看到孙元素只有一个的时候会下意识的忽略children是一个集合。在子节点后面加上数组序号children[i].childre

获取树形结构中，父节点下所有子/孙节点（递归方式）

百里杨的博客

12-28

2796

利用了递归方式，对形参parent节点下的所有节点进行遍历，并将该parent节点下所有子/孙节点，全部添加到一个List中，并返回给调用者。最后，分别打印输出China、SiChuan、GuangDong节点下的所有子/孙节点名称。这个类的函数比较简单，就是利用TreeItem类型，彼此依次添加，就可以形成树形结构。

JS获取子节点、父节点和兄弟节点的方法实例总结

01-19

本文实例讲述了JS获取子节点、父节点和兄弟节点的方法。分享给大家供大家参考，具体如下：一、js获取子节点的方式 1. 通过获取dom方式直接获取子节点 其中test的父标签id的值，div为标签的名字。...

父节点获取子节点的字符串示例代码

09-04

本示例探讨了如何从父节点获取子节点的字符串内容，主要涉及JavaScript原生方法和jQuery库的方法。首先，我们来看JavaScript的原生方法。在JavaScript中，我们可以使用`getElementById`方法来获取具有特定ID的元素...

原生js DOM节点的获取和简单操作

paidaboluo的博客

07-28

1626

原生js DOM节点的获取和常用操作

js或jquery如何获取父级、子级、兄弟元素

YLXB2的博客

01-23

1827

js或jquery如何获取父级、子级、兄弟元素原生javascript方法： var dom = document.getElementById("dom"); dom.childNodes; //获取a的全部子节点 dom.parentNode; //获取a的父节点 dom.nextSibling; //获取a的

javascript设定指定元素的父结点的孙子节点的属性

ankuai2015的博客

01-05

335

window.onload=function(){ var allerror_a = document.getElementsByClassName("popup_link"); for(var i=0;i<allerror_a.length;i++){ statustext=allerror_a[i].innerText; ...

原生 JS 获取节点方法总结

清平调、其N 的博客

01-26

7493

一、js获取子节点的方式 1. 通过获取dom方式直接获取子节点 其中test的父标签id的值，div为标签的名字。getElementsByTagName是一个方法。返回的是一个数组。在访问的时候要按数组的形式访问。 1 var a = document.getElementById("test").getElementsByTagName("div"); ...

[js] 查找树结构数据中的指定节点，查找指定节点的所有叶子节点，查找整棵树的所有叶子节点, 获取指定节点的所有子孙节点,判断树形结构中的某个节点是否为叶子节点

热门推荐

hellogull

05-14

59万+

先说一下JS的获取方法，其要比JQUERY的方法麻烦很多，后面以JQUERY的方法作对比。 JS的方法会比JQUERY麻烦很多，主要则是因为FF浏览器，FF浏览器会把你的换行也当最DOM元素原生的JS获取ID为test的元素下的子元素。可以用： var a = docuemnt.getElementById("test").getElementsByTagName("div

jquery DOM 父节点、祖先节点、子节点、子孙节点

dwc2011的专栏

07-24

3万+

获取父节点、祖先节点： 1. parents([selector]) 本方法用于选择给定 jQuery 对象中包含的 DOM 元素或者 DOM 元素集的祖先节点，并将这些节点包装成 jQuery 对象返回，返回的节点集是以从里到外的顺序排序的。同时，本方法还接受一个字符串选择器，用于从返回的节点集中筛选符合选择器的子元素集。 2. parent([selector]) 本方法用

原生js实现find找到孙元素

09-04

原生JavaScript实现查找孙元素，需要使用DOM操作函数和递归算法。首先，我们需要获取到父元素和孙元素的标识，可以通过获取父元素的id或类名来获取父元素节点，而孙元素比较难通过直接获取，我们可以通过遍历或其他方式找到。 ```javascript function findGrandChildElem(parentElemId) { // 获取父元素节点 const parentElem = document.getElementById(parentElemId); // 递归函数用于查找孙元素 function findGrandChild(node) { // 初始化孙元素数组 let grandChildElems = []; // 遍历子元素节点 for (let child of node.children) { // 如果子元素节点有子元素节点，递归调用该函数 if (child.children.length > 0) { grandChildElems = grandChildElems.concat(findGrandChild(child)); } // 将孙元素节点添加到孙元素数组中 grandChildElems.push(...child.children); } return grandChildElems; } // 调用递归函数查找孙元素 const grandChildElems = findGrandChild(parentElem); // 返回孙元素数组 return grandChildElems; } // 示例用法 const grandChildElements = findGrandChildElem('parent-container'); console.log(grandChildElements); ``` 上述代码中，`findGrandChildElem`函数使用DOM操作函数获取到父元素节点，然后调用递归函数`findGrandChild`找到所有的孙元素节点，并将它们添加到一个数组中返回。最后，我们可以通过控制台输出这个孙元素数组。需要注意的是，`parentElemId`参数应该是父元素节点的id值。