原生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写的日历(包括日历的样式及功能)
Apr 23 Javascript
JQuery中如何传递参数如click(),change()等具体实现
Apr 28 Javascript
javascript设置金额样式转换保留两位小数示例代码
Dec 04 Javascript
js实现的牛顿摆效果
Mar 31 Javascript
JS 拼凑字符串的简单实例
Sep 02 Javascript
图片懒加载imgLazyLoading.js使用详解
Sep 15 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
May 11 Javascript
vue中如何让子组件修改父组件数据
Jun 14 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
Jul 10 Javascript
关于JavaScript数组去重的一些理解汇总
Sep 10 Javascript
JS操作JSON常用方法(10w阅读)
Dec 06 Javascript
二维码条形码生成的JavaScript脚本库
Jul 07 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异常:Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE  eval()'d code error
2011/05/19 PHP
遍历指定目录下的所有目录和文件的php代码
2011/11/27 PHP
php中选择什么接口(mysql、mysqli)访问mysql
2013/02/06 PHP
Session 失效的原因汇总及解决丢失办法
2015/09/30 PHP
PHP实现的简单路由和类自动加载功能
2018/03/13 PHP
PHP读取XML文件的方法实例总结【DOMDocument及simplexml方法】
2019/09/10 PHP
PHP常见的序列化与反序列化操作实例分析
2019/10/28 PHP
JS日历 推荐
2006/12/03 Javascript
jquery 操作单选框,复选框,下拉列表实现代码
2009/10/27 Javascript
分享JavaScript获取网页关闭与取消关闭的事件
2013/12/13 Javascript
express的中间件cookieParser详解
2014/12/04 Javascript
Bootstrap table分页问题汇总
2016/05/30 Javascript
js仿新浪微博消息发布功能
2017/02/17 Javascript
nodejs学习笔记之路由
2017/03/27 NodeJs
js获取地址栏参数的两种方法
2017/06/27 Javascript
JS+CSS实现网页加载中的动画效果
2017/10/27 Javascript
Vue不能观察到数组length的变化
2018/06/08 Javascript
vue源码中的检测方法的实现
2019/09/26 Javascript
js实现时分秒倒计时
2019/12/03 Javascript
解决Vue watch里调用方法的坑
2020/11/07 Javascript
如何在现代JavaScript中编写异步任务
2021/01/31 Javascript
Python 单元测试(unittest)的使用小结
2018/11/14 Python
Python爬虫爬取煎蛋网图片代码实例
2019/12/16 Python
python实现飞船大战
2020/04/24 Python
python接口自动化之ConfigParser配置文件的使用详解
2020/08/03 Python
PHP如何防止SQL注入
2014/05/03 面试题
如何启动时不需输入用户名与密码
2014/05/09 面试题
中专生职业生涯规划书范文
2014/01/10 职场文书
感恩母亲节活动方案
2014/03/04 职场文书
中学生家长评语大全
2014/04/16 职场文书
保送生自荐信
2015/03/06 职场文书
人事行政助理岗位职责
2015/04/11 职场文书
针对吵架老公保证书
2015/05/08 职场文书
python实战之90行代码写个猜数字游戏
2021/04/22 Python
python 利用PyAutoGUI快速构建自动化操作脚本
2021/05/31 Python
Python类方法总结讲解
2021/07/26 Python