原生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分页
Jun 07 Javascript
jQuery 判断页面元素是否存在的代码
Aug 14 Javascript
Web前端设计模式  制作漂亮的弹出层
Oct 29 Javascript
Javascript 闭包引起的IE内存泄露分析
May 23 Javascript
jquery实现鼠标滑过显示提示框的方法
Feb 05 Javascript
JavaScript时间转换处理函数
Apr 14 Javascript
jQuery实现文本框邮箱输入自动补全效果
Nov 17 Javascript
Jquery技巧(必须掌握)
Mar 16 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
Feb 27 Javascript
浅谈JS函数节流防抖
Oct 18 Javascript
Vue项目中Api的组织和返回数据处理的操作
Nov 04 Javascript
vue中利用three.js实现全景图的完整示例
Dec 07 Vue.js
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/03/12 PHP
php数组比较实现查找连续数的方法
2015/07/29 PHP
php实现计算百度地图坐标之间距离的方法
2016/05/05 PHP
CI框架源码解读之利用Hook.php文件完成功能扩展的方法
2016/05/18 PHP
php、mysql查询当天,查询本周,查询本月的数据实例(字段是时间戳)
2017/02/04 PHP
php生出随机字符串
2017/07/06 PHP
开发跨浏览器javascript常见注意事项
2009/01/01 Javascript
jquery cookie插件代码类
2009/05/26 Javascript
js hover 定时器(实例代码)
2013/11/12 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
2016/04/05 Javascript
javascript 广告移动特效的实现代码
2016/06/25 Javascript
半个小时学json(json传递示例)
2016/12/25 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
2018/12/24 Javascript
2019最新21个MySQL高频面试题介绍
2020/02/06 Javascript
element中table高度自适应的实现
2020/10/21 Javascript
Vue实现多页签组件
2021/01/14 Vue.js
[56:20]LGD vs VP Supermajor 败者组决赛 BO3 第三场 6.10
2018/07/04 DOTA
Python学习笔记之常用函数及说明
2014/05/23 Python
Python利用openpyxl库遍历Sheet的实例
2018/05/03 Python
python抽取指定url页面的title方法
2018/05/11 Python
简单了解python 生成器 列表推导式 生成器表达式
2019/08/22 Python
Python 实现try重新执行
2019/12/21 Python
python通过matplotlib生成复合饼图
2020/02/06 Python
python dict如何定义
2020/09/02 Python
PyCharm安装PyQt5及其工具(Qt Designer、PyUIC、PyRcc)的步骤详解
2020/11/02 Python
python编写扎金花小程序的实例代码
2021/02/23 Python
解析html5 canvas实现背景鼠标连线动态效果代码
2019/06/17 HTML / CSS
印度在线购买电子产品网站:Croma
2020/01/02 全球购物
全国优秀辅导员事迹材料
2014/05/14 职场文书
学校工作推荐信范文
2014/07/11 职场文书
单方离婚协议书范本2014
2014/10/28 职场文书
承诺函范文
2015/01/21 职场文书
庆祝教师节活动总结
2015/03/23 职场文书
于丹论语心得观后感
2015/06/15 职场文书
2016教师六五普法学习心得体会
2016/01/21 职场文书
Go语言-为什么返回值为接口类型,却返回结构体
2021/04/24 Golang