原生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 相关文章推荐
在IE6下发生Internet Explorer cannot open the Internet site错误
Jun 21 Javascript
javascript循环变量注册dom事件 之强大的闭包
Sep 08 Javascript
javascript setTimeout和setInterval计时的区别详解
Jun 21 Javascript
把input初始值不写value的具体实现方法
Jul 04 Javascript
jQuery响应enter键的实现思路
Apr 18 Javascript
node.js中的fs.rmdirSync方法使用说明
Dec 16 Javascript
Bootstrap模块dropdown实现下拉框响应
May 22 Javascript
Angularjs自定义指令Directive详解
May 27 Javascript
jquery网页加载进度条的实现
Jun 01 jQuery
react.js使用webpack搭配环境的入门教程
Aug 14 Javascript
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
Dec 05 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
Aug 13 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
用cookies来跟踪识别用户
2006/10/09 PHP
推荐一篇入门级的Class文章
2007/03/19 PHP
PHP获取本周第一天和最后一天示例代码
2014/02/24 PHP
php数组操作之键名比较与差集、交集赋值的方法
2014/11/10 PHP
PHP扩展模块memcached长连接使用方法分析
2014/12/24 PHP
如何判断php mysqli扩展类是否开启
2016/12/24 PHP
yii2实现Ueditor百度编辑器的示例代码
2018/11/02 PHP
PHP实现小程序批量通知推送
2018/11/27 PHP
iframe 自适应高度[在IE6 IE7 FF下测试通过]
2009/04/13 Javascript
JavaScript 拾碎[三] 使用className属性
2010/10/16 Javascript
javascript event 事件解析
2011/01/31 Javascript
文件编码导致jquery失效的解决方法
2013/06/26 Javascript
javascript省市级联功能实现方法实例详解
2015/10/20 Javascript
微信小程序 教程之事件
2016/10/18 Javascript
JS敏感词过滤代码
2016/12/23 Javascript
vue.js+Element实现表格里的增删改查
2017/01/18 Javascript
ant-design-vue按需加载的坑的解决
2020/05/14 Javascript
JS如何定义用字符串拼接的变量
2020/07/11 Javascript
Jquery使用each函数实现遍历及数组处理
2020/07/14 jQuery
[01:11:11]Alliance vs RNG 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
利用pandas进行大文件计数处理的方法
2018/07/25 Python
python3中类的继承以及self和super的区别详解
2019/06/26 Python
Python队列、进程间通信、线程案例
2019/10/25 Python
python多线程和多进程关系详解
2020/12/14 Python
奥地利婴儿用品和玩具购物网站:baby-markt.at
2020/01/26 全球购物
关于Assembly命名空间的三个面试题
2015/07/23 面试题
【魔兽争霸3重制版】原版画面与淬火MOD画面对比
2021/03/26 魔兽争霸
企业行政文员岗位职责
2013/12/03 职场文书
简历自我评价怎么写呢?
2014/01/06 职场文书
办公室主任先进事迹
2014/01/18 职场文书
学习十八大报告感言
2014/02/04 职场文书
金融事务专业求职信
2014/04/25 职场文书
员工考核评语大全
2014/04/26 职场文书
领导干部廉政自律承诺书
2014/05/26 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
用python实现监控视频人数统计
2021/05/21 Python