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


Posted in Javascript onOctober 28, 2014

本文实例讲述了原生javascript实现获取指定元素下所有后代元素的方法,分享给大家供大家参考。具体实现方法如下:

过去常用的循环递归的方式显得非常的麻烦,下面就分享一个比较简单的方式,使用原生的javascript方法即可实现此功能。
代码实例如下:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>javascript获取后代元素</title>

<script type="text/javascript">

window.onload=function(){

  var obox=document.getElementById("box");

  var oshow=document.getElementById("show");

  var nodes=obox.getElementsByTagName("*");

  oshow.innerHTML=nodes.length;

}

</script>

</head>

<body>

<div id="show"></div>

<div id="box">

  <div>

    <ul>

      <li>元素一</li>

      <li>元素二</li>

      <li>元素三</li>

    </ul>

  </div>

</div>

</body>

</html>

上面的代码实现了我们的要求,参数星号表示一个通配符,它可以匹配所有类型的标签。
getElementsByTagName()方法的调用对象决定了它的查找范围。

希望本文所述对大家的javascript web程序设计有所帮助。

Javascript 相关文章推荐
jquery入门—选择器实现隔行变色实例代码
Jan 04 Javascript
jquery中对于批量deferred的处理方法
Jan 22 Javascript
JavaScript 学习笔记之数据类型
Jan 14 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
May 09 Javascript
AngularJS ng-bind 指令简单实现
Jul 30 Javascript
功能强大的Bootstrap使用手册(一)
Aug 02 Javascript
利用Node.js+Koa框架实现前后端交互的方法
Feb 27 Javascript
解决Vue页面固定滚动位置的处理办法
Jul 13 Javascript
JavaScript实现的DOM绘制柱状图效果示例
Aug 08 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
Dec 25 Javascript
JavaScript显式数据类型转换详解
Mar 18 Javascript
JS实现滚动条触底加载更多
Sep 19 Javascript
JS对象与json字符串格式转换实例
Oct 28 #Javascript
2014年最火的Node.JS后端框架推荐
Oct 27 #Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
Oct 26 #Javascript
JavaScript极简入门教程(三):数组
Oct 25 #Javascript
JavaScript极简入门教程(二):对象和函数
Oct 25 #Javascript
JavaScript极简入门教程(一):基础篇
Oct 25 #Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
Oct 23 #Javascript
You might like
php实现的在线人员函数库
2008/04/09 PHP
php中使用array_filter()函数过滤空数组的实现代码
2014/08/19 PHP
PHP对象、模式与实践之高级特性分析
2016/12/08 PHP
ZendFramework2连接数据库操作实例
2017/04/18 PHP
详解PHP使用Redis存储session时的一个Warning定位
2017/07/05 PHP
validator验证控件使用代码
2010/11/23 Javascript
JS分割字符串并放入数组的函数
2011/07/04 Javascript
读JavaScript DOM编程艺术笔记
2011/11/15 Javascript
JavaScript表达式:URL 协议介绍
2013/03/10 Javascript
js模拟select下拉菜单控件的代码
2013/05/08 Javascript
Jquery动态替换div内容及动态展示的方法
2015/01/23 Javascript
JavaScript中常见获取元素的方法汇总
2015/03/04 Javascript
JavaScript生成二维码图片小结
2015/12/27 Javascript
js中常用的Tab切换效果(推荐)
2016/08/30 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
2017/07/05 Javascript
基于vue cli重构多页面脚手架过程详解
2018/01/23 Javascript
vue.js中导出Excel表格的案例分析
2019/06/11 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
2019/11/13 Javascript
js实现拾色器插件(ColorPicker)
2020/05/21 Javascript
详解Vue Cli浏览器兼容性实践
2020/06/08 Javascript
js仿京东放大镜效果
2020/08/09 Javascript
浅谈vue websocket nodeJS 进行实时通信踩到的坑
2020/09/22 NodeJs
[03:49]2016完美“圣”典风云人物:AMS专访
2016/12/06 DOTA
Flask框架学习笔记(一)安装篇(windows安装与centos安装)
2014/06/25 Python
Python 递归函数详解及实例
2016/12/27 Python
Pandas中把dataframe转成array的方法
2018/04/13 Python
python实现批量注册网站用户的示例
2019/02/22 Python
python中with语句结合上下文管理器操作详解
2019/12/19 Python
CSS实现的一闪而过的图片闪光效果
2014/04/23 HTML / CSS
菲律宾旅游网站:Expedia菲律宾
2017/10/11 全球购物
美国棒球装备和用品商店:Baseball Savings
2018/06/09 全球购物
奢华的意大利皮革手袋:Bene Handbags
2019/10/29 全球购物
《燕子》教学反思
2014/02/18 职场文书
小学生家长寄语
2014/04/02 职场文书
终止合同协议书
2014/04/17 职场文书
超级实用!五步法则,教你写好年终工作总结
2019/12/05 职场文书