原生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实现无刷新DropDownList联动实现代码
Mar 08 Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
Apr 27 Javascript
用IE重起计算机或者关机的示例代码
Mar 10 Javascript
javascript自定义的addClass()方法
May 28 Javascript
jquery实现用户信息修改验证输入方法汇总
Jul 18 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
Mar 16 Javascript
location.hash保存页面状态的技巧
Apr 28 Javascript
微信小程序 window_x64环境搭建
Sep 30 Javascript
快速掌握jQuery插件开发
Jan 19 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
Jul 09 Javascript
vue 组件使用中的一些细节点
Apr 25 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
Sep 24 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获取textarea的值并处理回车换行的方法
2014/10/20 PHP
php实现短信发送代码
2015/07/05 PHP
PHP基于PDO调用sqlserver存储过程通用方法【基于Yii框架】
2017/10/07 PHP
PHP实现的mysql读写分离操作示例
2018/05/22 PHP
PHP PDOStatement::execute讲解
2019/01/31 PHP
理解JavaScript的caller,callee,call,apply
2009/04/28 Javascript
简单实例处理url特殊符号&amp;处理(2种方法)
2013/04/02 Javascript
JS实现在页面随时自定义背景颜色的方法
2015/02/27 Javascript
JavaScript中指定函数名称的相关方法
2015/06/04 Javascript
深入理解逻辑表达式的用法 与或非的用法
2016/06/06 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
2016/09/09 Javascript
微信小程序 wx.request(object) API详解及实例代码
2016/09/30 Javascript
清除js缓存的多种方法总结
2016/12/09 Javascript
nodejs个人博客开发第一步 准备工作
2017/04/12 NodeJs
jQuery 实现图片的依次加载图片功能
2017/07/06 jQuery
React复制到剪贴板的示例代码
2017/08/22 Javascript
微信小程序 上传头像的实例详解
2017/10/27 Javascript
JavaScript判断日期时间差的实例代码
2018/03/01 Javascript
javascript json字符串到json对象转义问题
2019/01/22 Javascript
微信小程序实现折线图的示例代码
2019/06/07 Javascript
详解package.json版本号规则
2019/08/01 Javascript
原生js实现分页效果
2020/09/23 Javascript
[01:32]DOTA2次级联赛——首支职业女子战队选拔赛全记录
2014/10/23 DOTA
[00:36]DOTA2上海特级锦标赛 Alliance战队宣传片
2016/03/04 DOTA
python+matplotlib实现动态绘制图片实例代码(交互式绘图)
2018/01/20 Python
python 处理dataframe中的时间字段方法
2018/04/10 Python
C#公司笔试题
2014/03/28 面试题
群众路线党课主持词
2014/04/01 职场文书
红色电影观后感
2015/06/18 职场文书
爱国电影观后感
2015/06/19 职场文书
暑期家教宣传单
2015/07/14 职场文书
优质护理心得体会
2016/01/22 职场文书
详解Go语言Slice作为函数参数的使用
2021/07/02 Golang
vue项目多环境配置(.env)的实现
2021/07/21 Vue.js
python分分钟绘制精美地图海报
2022/02/15 Python
基于Python实现对比Exce的工具
2022/04/07 Python