原生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 相关文章推荐
javascript addBookmark 加入收藏 多浏览器兼容
Aug 15 Javascript
JQUERY 浏览器判断实现函数
Aug 20 Javascript
Jquery 表格合并的问题分享
Sep 17 Javascript
Tab页界面 用jQuery及Ajax技术实现(php后台)
Oct 12 Javascript
基于jquery ajax 用户无刷新登录方法详解
Apr 28 Javascript
三种取消选中单选框radio的方法
Sep 09 Javascript
javascript实现汉字转拼音代码分享
Apr 20 Javascript
JavaScript实现移动端滑动选择日期功能
Jun 21 Javascript
js判断所有表单项不为空则提交表单的实现方法
Sep 09 Javascript
解决Webpack 热部署检测不到文件变化的问题
Feb 22 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
Aug 02 Javascript
微信小程序实现录音Record功能
May 09 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
一个数据采集类
2007/02/14 PHP
php中get_cfg_var()和ini_get()的用法及区别
2015/03/04 PHP
PHP递归遍历指定目录的文件并统计文件数量的方法
2015/03/24 PHP
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
2014/06/02 Javascript
nodejs实现的一个简单聊天室功能分享
2014/12/06 NodeJs
Webpack 实现 Node.js 代码热替换
2015/10/22 Javascript
AngularJS中使用HTML5手机摄像头拍照
2016/02/22 Javascript
AngularJS之自定义服务详解(factory、service、provider)
2017/04/14 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
2017/04/20 Javascript
在ABP框架中使用BootstrapTable组件的方法
2017/07/31 Javascript
vue项目中应用ueditor自定义上传按钮功能
2018/04/27 Javascript
Echarts实现多条折线可拖拽效果
2019/12/19 Javascript
javascript读取本地文件和目录方法详解
2020/08/06 Javascript
[01:00:11]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第一场 2月7日
2021/03/11 DOTA
CentOS 6.X系统下升级Python2.6到Python2.7 的方法
2016/10/12 Python
Python编程实现生成特定范围内不重复多个随机数的2种方法
2017/04/14 Python
python 用for循环实现1~n求和的实例
2019/02/01 Python
python实现抖音点赞功能
2019/04/07 Python
python开发游戏的前期准备
2019/05/05 Python
执行Python程序时模块报错问题
2020/03/26 Python
基于python检查SSL证书到期情况代码实例
2020/04/04 Python
英国排名第一的礼品体验公司:Red Letter Days
2018/08/16 全球购物
英国旅行箱包和行李箱购物网站:Travel Luggage & Cabin Bags
2019/08/26 全球购物
护士实习生自我鉴定范文
2013/12/10 职场文书
服务质量承诺书
2014/03/27 职场文书
行政管理专业求职信
2014/07/06 职场文书
安全生产目标管理责任书
2014/07/25 职场文书
商场父亲节活动方案
2014/08/27 职场文书
中国梦演讲稿开场白
2014/08/28 职场文书
机关驾驶员违规检讨书
2014/09/13 职场文书
初中作文评语集锦
2014/12/25 职场文书
委托书格式要求
2015/01/28 职场文书
试用期辞职信范文
2015/03/02 职场文书
公司员工辞职信范文
2015/05/12 职场文书
适合毕业生创业的项目怎么找?
2019/08/08 职场文书
创业计划书之便利店
2019/09/05 职场文书