使用递归获取所有后代元素

 1         function children(ele){
 2              //定义一个空数组,用来接收子元素
 3                 var allEle = [];
 4             //1.获取这个元素所有的子元素
 5             var eles = ele.childNodes;
 6             //2.再去获取子元素的子元素
 7             for (var i = 0; i < eles.length; i++) {
 8                 //遍历获取到的所有的子元素,就能拿到每一个子元素
 9                 var child = eles[i];
10                //判断是否为元素节点
11                 if(child.nodeType == 1){
13                     allEle.push(child);
14                     //2.再去获取当前子元素的所有子元素
15                     //获取到子元素之后,将其加入数组中
16                     var temp = children(child);
17                     allEle = allEle.concat(temp);
18                 }
19             }
20             //最终返回了数组
21             return allEle;
22         }
23             

这种封装,还可以扩展为获得元素id,判断id是否是你需要的等等。

时间: 2024-10-09 07:21:15

使用递归获取所有后代元素的相关文章

原生javascript实现获取指定元素下所有后代元素代码实例

原生javascript实现获取指定元素下所有后代元素代码实例:在本版块介绍过实现此功能的代码代码,但是在代码量上比较麻烦,采用的是循环递归的方式.上面你所说的方式可以参阅原生的javascript获取指定元素下所有的元素节点一章节,此文介绍的看起来非常的麻烦,那么下面就分享一个比较简单的方式,使用原生的javascript方法即可实现此功能.代码实例如下: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset=&

jQuery -&gt; 获取后代元素的三种方法

如果我们有内容如下的html文件,那么如何选取包含在<p>元素内的<i>元素呢? 邪馬台国の謎と弥生時代 紀元前1000年ごろ.水稲工作の技術をもつ集団が大挙して日本に移住してきた.これによって弥生時代が始まった. 縄文人も南方から伝わった稲を栽培していたが.彼らは原野を開いて大掛かりな水田をつくる発想を持たなかった.しかし.北九州に新たな文化を持って集団が来たのを知った彼らは次第に.水稲工作を受け入れ弥生人へとか分かっていた. html源码如下 <h1>邪馬台国の謎と

jquery选择器如何获取父级元素、同级元素、子元素

一.新建页面 1 <ul> 2 <li>list item 1</li> 3 <li>list item 2</li> 4 <li class="third-item">list item 3</li> 5 <li>list item 4</li> 6 <li>list item 5</li> 7 </ul> 8 9 <p>Hell

jquery选择器 之 获取父级元素,子元素,同级元素

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link href="style/css.css" rel="stylesheet" type="text/css" /> <script src="js/jquery-1.7.2.min.js"></script>

递归获取当前节点全部指定类型的子节点

在线预览 方法 使用nodeType判断类型,在allChildNodes方法内建立递归函数将allCN封装在方法内. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> p{ color: red; } span{ color: blue; }

Javascript 获取文档元素

一.getElementById() 参数:id 属性,必须唯一. 返回:元素本身.若 id 不唯一,则返回第一个匹配的元素. 定义的位置:仅 document(即:除 document 之外的元素调用该方法,会报 is not a function). 二.getElementsByName() 参数:name 属性,不必唯一. 返回:NodeList 对象. 定义的位置:仅 document. 彩蛋:对于 <form>.<img>.<ifram>,当且仅当为上述元素

获取第一个子元素 屏蔽浏览器的差异

//获取第一个子元素 屏蔽浏览器的差异 function getFirstElementChild(element){ //能力检测 判断是否支持firstElementChild if(element.firstElementChild){ //支持返回元素 return element.firstElementChild; }else{ //不知此判断下一个兄弟节点 var node = element.firstChild; while(node && node.nodeType !

控制台获取AngularJS某个元素的Scope

如何在控制台获取到某个元素的Scope呢? 假设,页面元素为: <label>Name:</label><input type="text" ng-model="yourName" placeholder="Enter a name here"><h1>{{yourName}}</h1> → 选择input元素 → 在控制台输入"$0",显示如下: <input

jquery1.11 操作checkbox:全选、取消全选、获取选择元素、获取取消选择元素(总结)

jquery1.11.1版本完成对checkbox的操作 1. 使用属性prop设置选中状态 2.使用:checked和:not(:checked)获取选中的元素 源码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1&quo