原生javascript实现获取指定元素下所有后代元素的方法

更新时间：2014年10月28日 15:08:45 投稿：shichen2014

这篇文章主要介绍了原生javascript实现获取指定元素下所有后代元素的方法,在进行web程序设计时是非常实用的技巧,需要的朋友可以参考下

本文实例讲述了原生javascript实现获取指定元素下所有后代元素的方法，分享给大家供大家参考。具体实现方法如下：

过去常用的循环递归的方式显得非常的麻烦，下面就分享一个比较简单的方式，使用原生的javascript方法即可实现此功能。
代码实例如下:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://www.jb51.net/" />

<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执行流程细节原理解析
这篇文章主要介绍了Javascript执行流程细节解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-05-05
Bootstrap文件上传组件之bootstrap fileinput
这篇文章主要介绍了Bootstrap文件上传组件之bootstrap fileinput,重点是把界面做得更加友好，更好的增加用户体验。还有还多注意细节大家可以通过本文详细了解下
2016-11-11
JS学习之表格的排序简单实例
下面小编就为大家带来一篇JS学习之表格的排序简单实例。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧
2016-05-05
使用JavaScript渲染页面的方法详解
本文主要介绍了使用JavaScript渲染页面的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,感兴趣的小伙伴下面随着小编来一起来学习吧
2023-12-12
javascript实现滚轮轮播图片
这篇文章主要为大家详细介绍了javascript实现滚轮轮播图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-12-12
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
在一个元素的属性中绑定事件，实际上就创建了一个内联事件处理函数（如<h1 onclick="alert(this);"...>...</h1>）,内联事件处理函数有其特殊的作用域链，并且各浏览器的实现细节也有差异。
2011-01-01
如何使用Javascript获取距今n天前的日期
本篇文章是对使用Javascript获取距今n天前日期的实现代码进行了详细的分析介绍，需要的朋友参考下
2013-07-07
js实现精美的银灰色竖排折叠菜单
这篇文章主要介绍了js实现精美的银灰色竖排折叠菜单,可实现页面左侧竖排的纵向折叠菜单效果,非常美观实用,需要的朋友可以参考下
2015-05-05
js读取注册表的键值示例
读取注册表的键值的方法有很多，在本文将为大家详细介绍下使用js如何实现注册表的键值读取，感兴趣的朋友可以参考下
2013-09-09
javascript中call和apply的用法示例分析
这篇文章主要介绍了javascript中call和apply的用法示例分析，非常的详细,需要的朋友可以参考下
2015-04-04