原生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程序设计有所帮助。

时间: 2014-10-27

用Javascript获取页面元素的具体位置

制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的大小和浏览器窗口的大小 首先,要明确两个基本概念. 一张网页的全部面积,就是它的大小.通常情况下,网页的大小由内容和CSS样式表决定. 浏览器窗口的大小,则是指在浏览器窗口中看到的那部分网页面积,又叫做viewport(视口). 很显然,如果网页的内容能够在浏览器窗口中全部显示(也就是不出现滚动条),那么网页的大小和浏览器窗口的大小是相等的.如果不能全部显示,

javascript获取元素偏移量的方法有哪些

通过四个属性可以获得元素的偏移量: 1.offsetHeight: 元素在垂直方向上占用的空间的大小,(像素).包括元素的高度,(可见的)水平滚动条的高度,上边框高度和下边框高度. 2.offsetWidth:元素在水平方向上占用的空间的大小,,(像素).包括元素的宽度,(可见的)垂直滚动条的高度,左边框高度和右边框高度. 3.offsetLeft: 元素的左外边框至包含元素的左内边框之间的像素距离: 3.offsetTop: 元素的上外边框至包含元素的上内边框之间的像素距离:

javascript通过className来获取元素的简单示例代码

示例如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv=

Javascript获取CSS伪元素属性的实现代码

CSS伪元素非常强大,它经常被用来创建CSS三角形提示,使用CSS伪元素可以实现一些简单的效果但又不需要增加额外的HTML标签.有一点就是Javascript无法获取到这些CSS属性值,但现在有一种方法可以获取到: 看看下面的CSS代码: .element:before { content: 'NEW'; color: rgb(255, 0, 0); }.element:before { content: 'NEW'; color: rgb(255, 0, 0); } 为了获取到.element

javascript获取form里的表单元素的示例代码

//获取form对象 var form=document.getElementById('my_form'); //用户名input对象 user_name是对象的name属性 var userName=form.user_name; //用户名清空 userName.value=''; //用户密码input对象 password是对象的name属性 var password=form.password; //用户密码清空 password.value=";

javascript获取元素CSS样式代码示例

使用css控制页面有4种方式,分别为行内样式(内联样式).内嵌式.链接式.导入式. 行内样式(内联样式)即写在html标签中的style属性中,如<div style="width:100px;height:100px;"></div> 内嵌样式即写在style标签中,例如<style type="text/css">div{width:100px; height:100px}</style> 链接式即为用link标签

javascript获取鼠标点击元素对象(示例代码)

IE:var obj=document.elementFromPoint(event.clientX,event.clientY); 获取对象文本var a=obj.innerText FF里面要在事件里面添加对象才可以读取坐标. HTML:onclick="gj(event)" JS: 复制代码 代码如下: function gj(event){ var b=objobj=document.elementFromPoint(event.clientX,event.clientY);}

javascript获取隐藏元素(display:none)的高度和宽度的方法

js获取可见元素的尺寸还是比较方便的,这个可以直接使用这个方法: 复制代码 代码如下: function getDefaultStyle(obj,attribute){ // 返回最终样式函数,兼容IE和DOM,设置参数:元素对象.样式特性 return obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute];} 但是如果这个元素是隐藏(dis

利用原生JavaScript获取元素样式只是获取而已

ps:是获取样式,不是设置样式.若没有给元素设置样式值,则返回浏览器给予的默认值.(论坛整理) 1.element.style:只能获取写在元素标签中的style属性里的样式值,无法获取到定义在<style></style>和通过<link href="css.css">加载进来的样式属性 复制代码 代码如下: var ele = document.getElementById('ele'); ele.style.color; //获取颜色 2.wi

javascript 获取元素样式必杀技

Javascript获取CSS属性值方法:getComputedStyle和currentStyle 1 .对于元素的内联CSS样式(<div style="color:#369">hello</div>),可以直接使用element.style.color来直接获取css属性的值: 2. 但是对于外部定义的css样式使用这种方式就无法获取了,而且IE浏览器和其他标准浏览器(Firefox,Chrome,Opera,Safari)使用的方法不一样,IE浏览器使用

原生javascript获取元素样式属性值的方法

所以, 我们得利用IE的currentStyle和W3C的getPropertyValue获取. elem.style.attr获取样式的方法就不说了. 先来看currentStyle方法, 此对象ie专属, 代表了在全局样式表.内嵌样式和 HTML 标签属性中指定的对象格式和样式. IE下通过它, 就可以获取元素的Css属性值. 而针对其他标准浏览器, W3C也提供了一个方法getPropertyValue, 此方法, 稍有点复杂, 首先要通过document.defaultView.getC

javascript通过class来获取元素实现代码

复制代码 代码如下: function getByClass(classname){ var nodes = document.getElementsByTagName('*'), ret=[]; for(var i=0;i<nodes.length;i++){ if(hasClass(nodes[i],classname)) ret.push(nodes[i]); } return ret; } function hasClass(node,className){ var names = no

Javascript遍历table中的元素示例代码

例如: <table id=tb> <tr><th> </th><th> </th><th> </th><th> </th></tr> <tr><td> </td><td> </td><td> </td><td> </td></tr> <tr>&

手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)

要想获取HTML元素的计算样式一直都存在很多的兼容问题,各浏览器都会存在一些差异,Firefox.webkit(Chrome,Safari)支持W3C标准的方法:getComputedStyle(),而IE6/7/8不支持标准的方法但是有私有的属性来实现:currentStyle,IE9和Opera两个都支持.有了这2个方法和属性基本上可以满足大多数要求了. 复制代码 代码如下: var getStyle = function( elem, type ){ return 'getComputed

原生JS与JQ获取元素的区别详解

这篇文章主要介绍了原生JS与JQ获取元素的区别详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 刚学JQ不久,有时候可能会把JS和JQ获取元素的方式搞错,接下来获取属性方法什么的就一发不可收拾了,现在把两者获取获取元素的代码整理下. 一.原生JS获取元素. 1.常用的三种方式获取元素对象(将指定的元素封装成DOM对象): (1)通过元素ID获取:document.getElementById(),示例如下: 我们在控制台输出,结果如下: 可以

JavaScript驾驭网页-获取网页元素

推荐阅读:JavaScript驾驭网页-DOM JavaScript驾驭网页-CSS与DOM 利用DOM分割HTML 利用JavaScript控制网页内容其实很像烹饪.只是不用收拾列羹剩肴,但也没有办法享受美味的成果. 不过,你将能完整网页内容的HTML构成要素:更重要的是,你将拥有替换网页成分的能力. JavaScript让你可以随心所欲地操控网页的HTML代码,从而打开各种有趣的机会之门,一切都是因为标准对象:DOM的存在 getElementById HTML标签都有一个"id"

javascript中获取元素标签中间的内容的实现方法

使用ajax,通过会把服务器端响应获取到reponseText或者reponseXML中的信息,以某种方法动态的写到div和span标记中,这样,可以在无刷新的情况下,改变页面内容的显示. 通过javascript进行动态的修改,修改的方法有两种: 1. 一种是使用html的每个标记的innerHTML属性,使用此属性,只要为它提供一个有意义的html代码片段,那么html解释器就可以将其中的内容进行解释,并显示在页面上,使用这种方式比较简单,每次修改前不需要先把原来的内容清除掉,而可以直接进行

JavaScript使用slice函数获取数组部分元素的方法

本文实例讲述了JavaScript使用slice函数获取数组部分元素的方法.分享给大家供大家参考.具体如下: JS数组带有一个slice方法,可以获取数组的指定部分,下面的代码获取数组中的第二个和第三个元素 <!DOCTYPE html> <html> <body> <p id="demo"> Click the button to extract the second and the third elements from the ar