原生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 相关文章推荐
Script的加载方法小结
Jan 12 Javascript
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
Feb 01 Javascript
js修改input的type属性问题探讨
Oct 12 Javascript
JavaScript设置首页和收藏页面的小例子
Nov 11 Javascript
原创jQuery弹出层插件分享
Apr 02 Javascript
angularjs客户端实现压缩图片文件并上传实例
Jul 06 Javascript
js实现获取当前时间是本月第几周的方法
Aug 11 Javascript
判断输入的字符串是否是日期格式的简单方法
Jul 11 Javascript
javascript实现用户点击数量统计
Dec 25 Javascript
javascript实现的图片预览功能
Mar 25 Javascript
浅谈关于.vue文件中style的scoped属性
Aug 19 Javascript
微信小程序实现打开内置地图功能【附源码下载】
Dec 07 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开发框架的对比
2013/07/05 PHP
windows中为php安装mongodb与memcache
2015/01/06 PHP
PHP编程开发怎么提高编程效率 提高PHP编程技术
2015/11/09 PHP
PHP7之Mongodb API使用详解
2015/12/26 PHP
php批量修改表结构实例
2017/05/24 PHP
Yii2实现ActiveForm ajax提交
2017/05/26 PHP
详解php语言最牛掰的Laravel框架
2017/11/20 PHP
JavaScript获取页面上某个元素的代码
2011/03/13 Javascript
你必须知道的JavaScript 中字符串连接的性能的一些问题
2013/05/07 Javascript
jquery动态添加删除div 具体实现
2013/07/20 Javascript
删除javascript所创建子节点的方法
2015/05/21 Javascript
基于ajax与msmq技术的消息推送功能实现代码
2016/12/26 Javascript
解决vue打包之后静态资源图片失效的问题
2018/02/21 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
2018/03/21 Javascript
Linux Centos7.2下安装nodejs&amp;npm配置全局路径的教程
2018/05/15 NodeJs
vue.js中toast用法及使用toast弹框的实例代码
2018/08/27 Javascript
vue el-upload上传文件的示例代码
2020/12/21 Vue.js
[13:39]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第一场
2014/05/26 DOTA
[06:42]DOTA2每周TOP10 精彩击杀集锦vol.1
2014/06/25 DOTA
[02:23]1个至宝=115个英雄特效 最“绿”至宝拉比克“魔导师密钥”登场
2018/12/29 DOTA
详解Django中的ifequal和ifnotequal标签使用
2015/07/16 Python
Python基于tkinter模块实现的改名小工具示例
2017/07/27 Python
Python实现压缩和解压缩ZIP文件的方法分析
2017/09/28 Python
Python3.7中安装openCV库的方法
2018/07/11 Python
Python字符串内置函数功能与用法总结
2019/04/16 Python
python range实例用法分享
2020/02/06 Python
Python统计文本词汇出现次数的实例代码
2020/02/27 Python
Lou & Grey美国官网:主打舒适性面料服饰
2017/12/21 全球购物
NULL是什么,它是怎么定义的
2015/05/09 面试题
优秀小学生家长评语
2014/01/30 职场文书
授权委托书
2015/01/28 职场文书
初婚初育证明范本
2015/06/18 职场文书
小学五年级班主任工作经验交流材料
2015/11/02 职场文书
读《解忧杂货店》有感:请相信一切都是最好的安排
2019/11/07 职场文书
Python合并多张图片成PDF
2021/06/09 Python
SpringBoot 集成短信和邮件 以阿里云短信服务为例
2022/04/22 Java/Android