原生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 相关文章推荐
firefox事件处理之自动查找event的函数(用于onclick=foo())
Aug 05 Javascript
一些常用的JavaScript函数(json)附详细说明
May 25 Javascript
jquery图片放大镜功能的实例代码
Mar 26 Javascript
对frameset、frame、iframe的js操作示例代码
Aug 16 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
Nov 07 Javascript
JavaScript验证18位身份证号码最后一位正确性的实现代码
Aug 07 Javascript
domReady的实现案例
Nov 23 Javascript
vue2.0实战之基础入门(1)
Mar 27 Javascript
jQuery tip提示插件(实例分享)
Apr 28 jQuery
AngularJS中使用ngModal模态框实例
May 27 Javascript
详解Angular-ui-BootStrap组件的解释以及使用
Jul 13 Javascript
谈一谈vue请求数据放在created好还是mounted里好
Jul 27 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的超级变量$_POST获取HTML表单(HTML Form) 数据
2011/05/07 PHP
PHP取二进制文件头快速判断文件类型的实现代码
2013/08/05 PHP
php连接oracle数据库的方法(测试成功)
2016/05/26 PHP
php+flash+jQuery多图片上传源码分享
2020/07/27 PHP
关于laravel后台模板laravel-admin select框的使用详解
2019/10/03 PHP
基于Jquery的标签智能验证实现代码
2010/12/27 Javascript
JavaScript 模拟类机制及私有变量的方法及思路
2013/07/10 Javascript
jquery实现横向图片轮播特效代码分享
2015/11/19 Javascript
总结十个Angular.js由浅入深的面试问题
2016/08/26 Javascript
AngularJS 2.0入门权威指南
2016/10/08 Javascript
jQuery简单自定义图片轮播插件及用法示例
2016/11/21 Javascript
js实现将json数组显示前台table中
2017/01/10 Javascript
浅谈JavaScript异步编程
2017/01/20 Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
2018/07/11 Javascript
对Vue table 动态表格td可编辑的方法详解
2018/08/28 Javascript
[01:36:57]【09DOTA2第一视角】小骷髅
2014/04/16 DOTA
Python最长公共子串算法实例
2015/03/07 Python
解决安装tensorflow遇到无法卸载numpy 1.8.0rc1的问题
2018/06/13 Python
详解Python 爬取13个旅游城市,告诉你五一大家最爱去哪玩?
2019/05/07 Python
python Pandas库基础分析之时间序列的处理详解
2019/07/13 Python
Python单元测试工具doctest和unittest使用解析
2019/09/02 Python
python之列表推导式的用法
2019/11/29 Python
python进程的状态、创建及使用方法详解
2019/12/06 Python
Tensorflow 使用pb文件保存(恢复)模型计算图和参数实例详解
2020/02/11 Python
Python新手学习标准库模块命名
2020/05/29 Python
python更新数据库中某个字段的数据(方法详解)
2020/11/18 Python
Python实现PS滤镜中的USM锐化效果
2020/12/04 Python
金融专业推荐信
2013/11/14 职场文书
会议主持词
2014/03/17 职场文书
《灰椋鸟》教学反思
2014/04/27 职场文书
产品包装策划方案
2014/05/18 职场文书
售房协议书
2014/08/19 职场文书
批评与自我批评范文
2014/10/15 职场文书
起诉状范本
2015/05/20 职场文书
入党团支部推荐意见
2015/06/02 职场文书
宾馆卫生管理制度
2015/08/06 职场文书