原生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 相关文章推荐
js post方式传递提交的实现代码
May 31 Javascript
JS教程:window.location使用方法的区别介绍
Oct 04 Javascript
js hover 定时器(实例代码)
Nov 12 Javascript
js打造数组转json函数
Jan 14 Javascript
12行javascript代码绘制一个八卦图
Apr 02 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
Sep 09 Javascript
快速掌握jQuery插件WebUploader文件上传
Nov 07 Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
Jan 10 Javascript
Map.vue基于百度地图组件重构笔记分享
Apr 17 Javascript
webpack多入口文件页面打包配置详解
Jan 09 Javascript
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
Oct 27 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
PhpMyAdmin出现export.php Missing parameter: what /export_type错误解决方法
2012/08/09 PHP
PHP输出当前进程所有变量/常量/模块/函数/类的示例
2013/11/07 PHP
php file_get_contents抓取Gzip网页乱码的三种解决方法
2013/11/12 PHP
php实现按文件名搜索文件的远程文件查找器
2014/05/10 PHP
Yii的CDbCriteria查询条件用法实例
2014/12/04 PHP
PHP SplObjectStorage使用实例
2015/05/12 PHP
微信公众号模板消息群发php代码示例
2016/12/29 PHP
Laravel框架模板继承操作示例
2018/06/11 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
分享几种好用的PHP自定义加密函数(可逆/不可逆)
2020/09/15 PHP
javascript Array.sort() 跨浏览器下需要考虑的问题
2009/12/07 Javascript
js下利用控制器载入对应脚本
2010/07/17 Javascript
Jquery Validate 正则表达式实用验证代码大全
2013/08/23 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
2013/12/27 Javascript
Javascript核心读书有感之词法结构
2015/02/01 Javascript
实例详解jQuery表单验证插件validate
2016/01/18 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
2016/10/21 Javascript
基于JavaScript实现的快速排序算法分析
2017/04/14 Javascript
详解vue 数据传递的方法
2018/04/19 Javascript
详解vue项目中如何引入全局sass/less变量、function、mixin
2018/06/02 Javascript
CKEditor4配置与开发详细中文说明文档
2018/10/08 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
2019/09/26 Javascript
JavaScript实现简单计算器功能
2019/12/19 Javascript
Element Rate 评分的使用方法
2020/07/27 Javascript
Vue——前端生成二维码的示例
2020/12/19 Vue.js
[56:48]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[02:16]完美世界DOTA2联赛PWL S3 集锦第三期
2020/12/21 DOTA
python时间整形转标准格式的示例分享
2014/02/14 Python
解决安装tensorflow遇到无法卸载numpy 1.8.0rc1的问题
2018/06/13 Python
详解Django中六个常用的自定义装饰器
2018/07/04 Python
3行Python代码实现图像照片抠图和换底色的方法
2019/10/10 Python
Python基于unittest实现测试用例执行
2020/11/25 Python
党员学习新党章思想汇报
2014/10/25 职场文书
公司财务制度:成本管理控制制度模板
2019/11/19 职场文书
python解决12306登录验证码的实现
2021/04/18 Python
阿里云ECS云服务器快照的概念以及如何使用
2022/04/21 Servers