原生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 订制自己的AlertBox(信息提示框)
Jan 09 Javascript
IE与Firefox在JavaScript上的7个不同写法小结
Sep 14 Javascript
javascript写的日历类(基于pj)
Dec 28 Javascript
jquery实现带复选框的表格行选中删除时高亮显示
Aug 01 Javascript
node.js应用后台守护进程管理器Forever安装和使用实例
Jun 01 Javascript
jQuery trigger()方法用法介绍
Jan 13 Javascript
jquery+javascript编写国籍控件
Feb 12 Javascript
Bootstrap中的Panel和Table全面解析
Jun 13 Javascript
深入探究node之Transform
Jul 20 Javascript
对node.js中render和send的用法详解
May 14 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
Jun 25 Javascript
layUI实现列表查询功能
Jul 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
php class中self,parent,this的区别以及实例介绍
2013/04/24 PHP
php中的常用魔术方法总结
2013/08/02 PHP
phpmyadmin config.inc.php配置示例
2013/08/27 PHP
Javascript中正则表达式的全局匹配模式分析
2011/04/26 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
2012/02/03 Javascript
js弹出模式对话框,并接收回传值的方法
2013/03/12 Javascript
浅析JavaScript中的同名标识符优先级
2013/12/06 Javascript
js防止页面被iframe调用的方法
2014/10/30 Javascript
js canvas实现擦除动画
2016/07/16 Javascript
AngularJS Bootstrap详细介绍及实例代码
2016/07/28 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
2016/09/01 Javascript
node.js文件上传处理示例
2016/10/27 Javascript
使用canvas及js简单生成验证码方法
2017/04/02 Javascript
vue使用Axios做ajax请求详解
2017/06/07 Javascript
前端常见跨域解决方案(全)
2017/09/19 Javascript
JS实现图片拖拽交换效果
2018/11/30 Javascript
iphone刘海屏页面适配方法
2019/05/07 Javascript
JQuery的加载和选择器用法简单示例
2019/05/13 jQuery
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
2020/03/11 Javascript
python异步任务队列示例
2014/04/01 Python
Python爬虫框架Scrapy安装使用步骤
2014/04/01 Python
分析用Python脚本关闭文件操作的机制
2015/06/28 Python
使用Python读写文本文件及编写简单的文本编辑器
2016/03/11 Python
浅谈DataFrame和SparkSql取值误区
2018/06/09 Python
让代码变得更易维护的7个Python库
2018/10/09 Python
python 定时器,实现每天凌晨3点执行的方法
2019/02/20 Python
python实现多进程按序号批量修改文件名的方法示例
2019/12/30 Python
解决Pytorch训练过程中loss不下降的问题
2020/01/02 Python
Python栈的实现方法示例【列表、单链表】
2020/02/22 Python
Python命名空间及作用域原理实例解析
2020/08/12 Python
45个非常奇妙的CSS3 特性应用示例
2012/01/01 HTML / CSS
英国评分最高的女性剃须刀订阅盒:FFS Beauty
2018/01/25 全球购物
美国在线自行车商店:Jenson USA
2018/05/22 全球购物
美国最大的船只买卖在线市场:Boat Trader
2018/08/04 全球购物
创业培训计划书
2014/05/03 职场文书
保险公司演讲稿
2014/09/02 职场文书