原生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性能陷阱小结(附实例说明)
Dec 28 Javascript
关于js中alert弹出窗口文本换行问题简单详细说明
Dec 11 Javascript
javascript中setInterval的用法
Jul 19 Javascript
JS对大量数据进行多重过滤的方法
Nov 04 Javascript
Node.JS中事件轮询(Event Loop)的解析
Feb 25 Javascript
Jquery EasyUI $.Parser
Jun 02 jQuery
javascript简写常用的12个技巧(可以大大减少你的js代码量)
Mar 28 Javascript
Vue 无限滚动加载指令实现方法
May 28 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
Sep 01 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
JS实现基本的网页计算器功能示例
Jan 16 Javascript
JavaScript canvas实现跟随鼠标事件
Feb 10 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实现的迷你漂流瓶
2015/07/29 PHP
PHP实现登录注册之BootStrap表单功能
2017/09/03 PHP
php7函数,声明,返回值等新特性介绍
2018/05/25 PHP
把JS与CSS写在同一个文件里的书写方法
2007/06/02 Javascript
解析prototype,JQuery中跳出each循环的方法
2013/12/12 Javascript
网站繁简切换的JS遇到页面卡死的解决方法
2014/03/12 Javascript
JavaScript中的this关键字使用方法总结
2015/03/13 Javascript
极力推荐10个短小实用的JavaScript代码段
2016/08/03 Javascript
jQuery 表单序列化实例代码
2017/06/11 jQuery
JavaScript+CSS相册特效实例代码
2017/09/07 Javascript
JS中的事件委托实例浅析
2018/03/22 Javascript
深入浅析Vue.js中 computed和methods不同机制
2018/03/22 Javascript
vue实现条件叠加搜索的解决方法
2019/05/28 Javascript
手写Vue弹窗Modal的实现代码
2019/09/11 Javascript
在vue中阻止浏览器后退的实例
2019/11/06 Javascript
原生js实现瀑布流效果
2020/03/09 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
2020/11/04 Javascript
[01:32]TI奖金增速竟因它再创新高!DOTA2勇士令状不朽珍藏Ⅰ饰品欣赏
2018/05/18 DOTA
urllib2自定义opener详解
2014/02/07 Python
安装Python的web.py框架并从hello world开始编程
2015/04/25 Python
python从入门到精通(DAY 2)
2015/12/20 Python
Python和Perl绘制中国北京跑步地图的方法
2016/03/03 Python
Python 实现简单的shell sed替换功能(实例讲解)
2017/09/29 Python
python flask搭建web应用教程
2019/11/19 Python
使用python求解二次规划的问题
2020/02/29 Python
探索HTML5本地存储功能运用技巧
2016/03/02 HTML / CSS
英智兴达软件测试笔试题
2016/10/12 面试题
客服主管岗位职责
2013/12/13 职场文书
高中英语演讲稿范文
2014/04/24 职场文书
新农村建设标语
2014/06/24 职场文书
会议接待欢迎标语
2014/10/08 职场文书
婚前财产协议书范本
2014/10/19 职场文书
自书遗嘱范文
2015/08/07 职场文书
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/04/22 无线电
解决Python保存文件名太长OSError: [Errno 36] File name too long
2022/05/11 Python
nginx lua 操作 mysql
2022/05/15 Servers