原生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 11 Javascript
js返回上一页并刷新代码整理
Dec 21 Javascript
easyui datagrid 键盘上下控制选中行示例
Mar 31 Javascript
JavaScript判断浏览器类型的方法
Feb 10 Javascript
javascript获取元素离文档各边距离的方法
Feb 13 Javascript
JavaScript获取指定元素位置的方法
Apr 08 Javascript
获取阴历(农历)和当前日期的js代码
Feb 15 Javascript
Angular-UI Bootstrap组件实现警报功能
Jul 16 Javascript
使用p5.js临摹动态图片
Nov 04 Javascript
node.js使用yargs处理命令行参数操作示例
Feb 11 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
Jul 22 Javascript
Vue+Element UI实现概要小弹窗的全过程
May 30 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
ThinkPHP3.2.3框架实现执行原生SQL语句的方法示例
2019/04/03 PHP
jquery select选中的一个小问题
2009/10/11 Javascript
50款非常棒的 jQuery 插件分享
2012/03/29 Javascript
js中的this关键字详解
2013/09/25 Javascript
js通过八个点 拖动改变div大小的实现方法
2014/03/05 Javascript
javascript学习笔记之函数定义
2015/06/25 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
2015/12/30 Javascript
深入浅析JavaScript中with语句的理解
2016/05/12 Javascript
node网页分段渲染详解
2016/09/05 Javascript
js获取Get值的方法
2016/09/29 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
2017/02/05 Javascript
Angular.js中下拉框实现渲染html的方法
2017/06/18 Javascript
聊聊Vue.js的template编译的问题
2017/10/09 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
2018/01/25 jQuery
elementUI中Table表格问题的解决方法
2018/12/04 Javascript
JavaScript Canvas编写炫彩的网页时钟
2019/10/16 Javascript
一看就会的vuex实现登录验证(附案例)
2020/01/09 Javascript
深入学习Python中的装饰器使用
2016/06/20 Python
python定时利用QQ邮件发送天气预报的实例
2017/11/17 Python
Python读取本地文件并解析网页元素的方法
2018/05/21 Python
Python中 CSV格式清洗与转换的实例代码
2019/08/29 Python
python 实现矩阵按对角线打印
2019/11/29 Python
对Python中 \r, \n, \r\n的彻底理解
2020/03/06 Python
详解python 条件语句和while循环的实例代码
2020/12/28 Python
html5 canvas-1.canvas介绍(hello canvas)
2013/01/07 HTML / CSS
用HTML5制作数字时钟的教程
2015/05/11 HTML / CSS
精选鞋类、服装和配饰的全球领先目的地:Bodega
2021/02/27 全球购物
英语专业毕业生自我鉴定
2013/11/09 职场文书
责任心演讲稿
2014/05/14 职场文书
英语系本科生求职信
2014/07/15 职场文书
房屋租赁委托书范本
2014/10/04 职场文书
2014年安全生产工作总结
2014/11/13 职场文书
2014年体育教师工作总结
2014/12/03 职场文书
入队仪式主持词
2015/07/04 职场文书
MySQL分库分表详情
2021/09/25 MySQL
使用opencv-python如何打开USB或者笔记本前置摄像头
2022/06/21 Python