原生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 获得选中文本内容的方法
Feb 15 Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
May 07 Javascript
Extjs4中Form的使用之本地hiddenfield
Nov 26 Javascript
谈一谈jQuery核心架构设计
Mar 28 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
Sep 05 Javascript
JS实现的几个常用算法
Nov 12 Javascript
js 图片转base64的方式(两种)
Apr 24 Javascript
Bootstrap Table列宽拖动的方法
Aug 15 Javascript
Vue中的组件及路由使用实例代码详解
May 22 Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
May 28 Javascript
jQuery实现日历效果
Sep 11 jQuery
绘制微信小程序验证码功能的实例代码
Jan 05 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 AJAX实例根据邮编自动完成地址信息
2008/11/23 PHP
php教程之魔术方法的使用示例(php魔术函数)
2014/02/12 PHP
JavaScript 常用函数库详解
2009/10/21 Javascript
通过上下左右键和回车键切换光标实现代码
2013/03/08 Javascript
jquery.cookie用法详细解析
2013/12/18 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
2015/03/18 Javascript
Js实现自定义右键行为
2015/03/26 Javascript
jQuery获取多种input值的简单实现方法
2016/06/20 Javascript
nodeJS实现简单网页爬虫功能的实例(分享)
2017/06/08 NodeJs
关于在vue 中使用百度ueEditor编辑器的方法实例代码
2018/09/14 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
2018/10/12 Javascript
如何为你的JavaScript代码日志着色详解
2019/04/08 Javascript
vue axios请求成功却进入catch的原因分析
2020/09/08 Javascript
Python pass 语句使用示例
2014/03/11 Python
fastcgi文件读取漏洞之python扫描脚本
2017/04/23 Python
详解PyTorch手写数字识别(MNIST数据集)
2019/08/16 Python
python爬虫 2019中国好声音评论爬取过程解析
2019/08/26 Python
python如何通过pyqt5实现进度条
2020/01/20 Python
浅谈matplotlib.pyplot与axes的关系
2020/03/06 Python
Python如何优雅删除字符列表空字符及None元素
2020/06/25 Python
如何利用python进行时间序列分析
2020/08/04 Python
用CSS3的box-reflect设置文字倒影效果的方法讲解
2016/03/07 HTML / CSS
canvas实现烟花的示例代码
2020/01/16 HTML / CSS
阿迪达斯法国官方网站:adidas法国
2018/03/20 全球购物
英国美发和美容产品商城:HQhair
2019/02/08 全球购物
美国专业消费电子及摄影器材网站:B&H Photo Video
2019/12/18 全球购物
毕业生多媒体设计求职信
2013/10/12 职场文书
日语翻译个人求职的自我评价
2013/10/14 职场文书
蛋糕店的商业计划书范文
2014/01/27 职场文书
文秘人员工作职责
2014/01/31 职场文书
人力资源管理专业求职信
2014/07/23 职场文书
2014基层党员批评与自我批评范文
2014/09/24 职场文书
兵马俑导游词
2015/02/02 职场文书
2015年元宵节活动总结
2015/02/06 职场文书
男方家长婚礼致辞
2015/07/27 职场文书
护理工作心得体会
2016/01/22 职场文书