原生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>
<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获取CSS伪元素属性的实现代码
- javascript获取元素偏移量的方法有哪些
- javascript获取隐藏元素(display:none)的高度和宽度的方法
- javascript 获取元素样式必杀技
- javascript获取form里的表单元素的示例代码
- javascript通过className来获取元素的简单示例代码
- javascript获取鼠标点击元素对象(示例代码)
- 用Javascript获取页面元素的具体位置
- javascript获取元素CSS样式代码示例
- javascript通过class来获取元素实现代码
- 原生javascript获取元素样式属性值的方法
相关文章
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
注明:以下方法都经过实例和开发的长期验证,其实这些技术早就有,今天只不过自己归纳一下2008-09-09
下面小编就为大家带来一篇通用无限极下拉菜单的实现代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
在js面试中快速排序和数组去重是比较常问的面试题，下面小编给大家分享下我对JS实现快速排序和去重的理解，感兴趣的朋友一起看看吧2016-10-10
这篇文章主要为大家详细介绍了基于MVC方式实现三级联动的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
这篇文章主要介绍了JS绘图Flot如何实现动态可刷新曲线图,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-10-10
这段很短的代码，可以将word转出html格式的代码，当然word自己也带的，另存为里面就有的，喜欢的朋友可以试试。2010-04-04
JavaScript中的字符串就是用''或""括起来的字符表示。下面通过本文给大家介绍JavaScript字符串的相关知识，感兴趣的朋友一起看看吧2017-06-06
发现了一个非常好的JavaScript调试方法，目前看到的是可以打印Object/Array/Function/String四种类型，使用方法和PHP中的var_dump()一样，只要直接dump(变量名)即可。2009-09-09
这篇文章主要介绍了特殊日期提示功能的实现方法的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-06-06
本文主要分享了微信页面倒计时代码（pc端）,并在文章结尾分析了safari不兼容date的原因以及解决方法，具有很好的参考价值，需要的朋友一起来看下吧2016-12-12
最新评论