原生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获取元素样式属性值的方法
相关文章
这篇文章主要介绍了JavaScript实现快速排序的方法,实例分析了javascript快速排序的相关实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
这篇文章主要介绍了JavaScript中防抖和节流的区别及适用场景，文章通过围绕主题的相关资料展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-05-05
这篇文章主要介绍了使用OpenLayers3 添加地图鼠标右键菜单的相关资料,需要的朋友可以参考下2015-12-12
这篇文章主要介绍了shiro授权的实现原理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要为大家分享了Bootstrap在线电子商务网站实战项目，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
这篇文章主要介绍了Javascript获取统一管理的提示语(message)的相关资料,需要的朋友可以参考下2016-02-02
下面小编就为大家带来一篇简单实现轮播图效果的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
这篇文章主要给大家介绍了关于保姆级Decimal.js使用的相关资料,文中介绍的方法主要解决了js精度问题,decimal.js库它是一个强大的JavaScript库,用于解决浮点数计算精度不准确的问题,需要的朋友可以参考下2024-05-05
这篇文章主要介绍了JavaScript组合拼接字符串的效率对比测试,本文测试了IE6、Firefox、Mozilla、Netscape、Opera等浏览器,需要的朋友可以参考下2014-11-11
这篇文章主要为大家介绍了如何追踪discord.js中删除消息的用户方法实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2024-01-01
最新评论