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

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

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

复制代码 代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://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程序设计有所帮助。

时间: 2024-09-14 02:08:15

原生javascript实现获取指定元素下所有后代元素的方法_javascript技巧的相关文章

python获取指定目录下所有文件名列表的方法

  本文实例讲述了python获取指定目录下所有文件名列表的方法.分享给大家供大家参考.具体实现方法如下: 这里python代码实现获取文件名列表的功能,可以指定文件中包含的字符,方便提取特定类型的文件名列表: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 #

php获取指定范围内最接近数的方法_php技巧

本文实例讲述了php获取指定范围内最接近数的方法.分享给大家供大家参考.具体实现方法如下: // Returns the next higher or lower number function NextRelatedNumber($number, $range){ $r = $number % $range; $f = $number - $r; $b = round($r / $range, 0); return ($b == 1) ? $f + $range : $f; } // Retu

PHP获取指定日期是星期几的实现方法_php技巧

本文实例讲述了PHP获取指定日期是星期几的实现方法.分享给大家供大家参考,具体如下: <?php header("Content-type: text/html; charset=utf-8"); //获取星期方法 function get_week($date){ //强制转换日期格式 $date_str=date('Y-m-d',strtotime($date)); //封装成数组 $arr=explode("-", $date_str); //参数赋值

PHP获取指定月份第一天和最后一天的方法_php技巧

本文实例讲述了PHP获取指定月份第一天和最后一天的方法.分享给大家供大家参考.具体如下: 复制代码 代码如下: $date = date(time()); $start_date = date('Y-m-d', mktime(00, 00, 00, date('m', strtotime($date))+1, 01)); $end_date = date('Y-m-d', mktime(23, 59, 59, date('m', strtotime($date))+2, 00)); 希望本文所述

js 获取元素所有兄弟节点的实现方法_javascript技巧

比如一个ul里面有10个li,而第3个li上有特殊的样式(比如颜色为红色,其他为黑色).我想把其他所有li--不包括红的li--的颜色也设为红色,此时,就需要获得红li的所有兄弟节点. 兄弟,就是和你平辈的,既不是上一级也不是下一级,而且可能有比你大的(兄),也可能比你小(弟).兄弟节点同理,下面是一个常规的获取兄弟节点的办法. 代码如下 function siblings(elm) { var a = []; var p = elm.parentNode.children; for(var i

JavaScript取得键盘按下方向键是哪个的方法_javascript技巧

本文实例讲述了JavaScript取得键盘按下方向键是哪个的方法.分享给大家供大家参考.具体如下: 这里通过创建一个event.keyCode对象,可有效获取键盘上的方向键,运行代码后,点击键盘上的任意方向键,网页会以Alert的方式返回你按下的是哪个键. 运行效果如下图所示: 具体代码如下: <html> <head> <title>取得键盘的方向键</title> <script language="javascript">

JavaScript获取按钮所在form表单id的方法_javascript技巧

本文实例讲述了JavaScript获取按钮所在form表单id的方法.分享给大家供大家参考.具体如下: 这里使用javascript获取form表单按钮的id,可以通过下面的JS代码获取. <!DOCTYPE html> <html> <body> <h1>www.sharejs.com</h1> <form id="form1"> <button id="button1" type=&q

快速获取/设置iframe内对象元素的几种js实现方法_javascript技巧

1.IE专用(通过frames索引形象定位): document.frames[i].document.getElementById('元素的ID'); 2.IE专用(通过IFRAME名称形象定位): document.frames['iframe的name'].document.getElementById('元素的ID'); 以上方法,不仅对IFRAME适用,对FRAMESET里的FRAME也同样适用.IE虽然擅于自定标准,但不得不说它很多的设计还是比较体现人性化的.比如这个,它在同样支持下

js获取Html元素的实际宽度高度的方法_javascript技巧

第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度. 第二种情况就是宽和高是写在行内中,比如style="width:120px;",这中情况通过上述2个方法都能拿到宽度. 小结,因为id.offsetWidth和id.offsetHeight无视样式写在样式表还是行内,所以我们获取元素宽和高的时候最好用这2个属性.注意如果不是写在行内styl