原生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轻松实现Ajax的实例代码
Aug 16 Javascript
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
Oct 31 Javascript
js判断样式className同时增加class或删除class
Jan 30 Javascript
jquery实现带复选框的表格行选中删除时高亮显示
Aug 01 Javascript
JS长整型精度问题实例分析
Jan 13 Javascript
jQuery实现字符串全部替换的方法【推荐】
Mar 09 Javascript
JavaScript监听手机物理返回键的两种解决方法
Aug 14 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
Jan 15 Javascript
vue.js使用3DES加密的方法示例
May 18 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
Feb 02 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
Jan 07 Javascript
vue实现员工信息录入功能
Jun 11 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/05/12 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
javaScript parseInt字符转化为数字函数使用小结
2009/11/05 Javascript
js setattribute批量设置css样式
2009/11/26 Javascript
纯js实现无限空间大小的本地存储
2015/06/18 Javascript
jQuery实现滚动切换的tab选项卡效果代码
2015/08/26 Javascript
JavaScript中两个字符串的匹配
2016/06/08 Javascript
Bootstrap中的Panel和Table全面解析
2016/06/13 Javascript
AngularJS 基础ng-class-even指令用法
2016/08/01 Javascript
angularjs 源码解析之scope
2016/08/22 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
2016/08/26 Javascript
jquery插件bootstrapValidator数据验证详解
2016/11/09 Javascript
javascript 注释代码的几种方法总结
2017/01/04 Javascript
新手入门带你学习JavaScript引擎运行原理
2019/06/24 Javascript
ES6 新增的创建数组的方法(小结)
2019/08/01 Javascript
jquery将json转为数据字典的实例代码
2019/10/11 jQuery
Vue 封装防刷新考试倒计时组件的实现
2020/06/05 Javascript
react的hooks的用法详解
2020/10/12 Javascript
js实现有趣的倒计时效果
2021/01/19 Javascript
[28:42]Ti4正赛VG vs NEWBEE1
2014/07/19 DOTA
Python正则表达式使用经典实例
2016/06/21 Python
python打包压缩、读取指定目录下的指定类型文件
2018/04/12 Python
解决PyCharm的Python.exe已经停止工作的问题
2018/11/29 Python
python爬虫 爬取超清壁纸代码实例
2019/08/16 Python
keras的backend 设置 tensorflow,theano操作
2020/06/30 Python
HTML5 背景的显示区域实现
2020/07/09 HTML / CSS
全球立体声:World Wide Stereo
2018/09/29 全球购物
Oracle的内存结构(Memory structures)
2015/06/10 面试题
项目经理岗位职责
2013/11/11 职场文书
学校勤俭节约倡议书
2015/04/29 职场文书
2015年测量员工作总结
2015/05/23 职场文书
2015年医院科室工作总结范文
2015/05/26 职场文书
一篇文章带你学习Mybatis-Plus(新手入门)
2021/08/02 Java/Android
Python中使用tkFileDialog实现文件选择、保存和路径选择
2022/05/20 Python
Vue3实现简易音乐播放器组件
2022/08/14 Vue.js
TypeScript实用技巧 Nominal Typing名义类型详解
2022/09/23 Javascript