代码测试是ie5+;

原生javascript中筛选出含有指定类的元素;

思想:在指定范围里把所有的元素筛选出来,然后把里面的每个元素都遍历找出它们含有的所有类,然后逐个元素遍历它们各自的类,如果指定的类和它们里面的类相等,那么就把这个元素放进一个数组中然后返回这个数组。

<span style="font-size:18px;"><!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function getClassName(classname,idbox){ /*创建一个函数,可以传入两个参数,指定选择的类,指定选择类的范围*/
var box=document.getElementById(idbox); //获取ID为第二个参数的元素
var cbox=box || document; //检测box是否存在(否有传入第二个参数),如果不存在则把document赋予变量cbox(确定指定类的父容器即类的范围)如果有则在指定的容器中寻找类,如果没有则在整个文档中寻找。
var cbox_elem=cbox.getElementsByTagName('*'); //获取指定容器或页面中所有元素
var ctag=new Array(); /*创建一个空数组用来后面放置含有指定类的元素*/
for(var i=0;i<cbox_elem.length;i++){ /*遍历容器中的所有元素*/
var cur_else=cbox_elem[i]; /*把当前遍历的元素赋值给变量cur_else*/
var classnames=cur_else.className.split(' ');
/*把当前遍历的元素中的所有类用空格分开成一个数组并赋值给变量classnames*/
for(var j=0;j<classnames.length;j++){ /*遍历当前元素中里的每个类*/
if(classnames[j]==classname){ /*当前遍历中的类和第一个参数是否相等*/
ctag.push(cur_else); /*相等则把拥有该类的元素添加到先前创建好的数组中*/
break; /*退出这个类循环直接跳到外层元素for语句*/
}
}
}
return ctag; /*把数组返回给调用的代码,这里把数组返回给变量all_li*/
}
window.onload=function(){
var all_li=getClassName("pp","y");
alert(all_li.length)
}
</script>
</head>
<body>
<!-- 兼容IE5+ -->
<ul id="y">
<li class="pp uu"></li>
<li class="pp"></li>
<li class="pp"></li>
<li ></li>
<li ></li>
</ul>
</body>
</html></span>

知识点学习

JavaScript中的obj.split(a,b) 方法

用于把一个字符串分割成字符串数组。

该方法有两个参数:

a:必需。字符串或者正则表达,用来指定分割的地方。

b:可选。指定返回数组的最大长度,返回指定个数的数组。

javascript获取类元素的更多相关文章

  1. JavaScript获取html元素的实际宽度和高度

    一.JavaScript获取html元素宽高 1.宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通过#div1.style.width拿不到宽度,而通过#div1.offs ...

  2. 用javaScript获取页面元素值

    用JavaScript获取页面元素常见的三种方法:                                                           getElementById() ...

  3. javascript 获取iframe元素的方法

    javascript  获取iframe元素的方法 第一种: $("#IframeID").contents().find("div"); 第二种: $(win ...

  4. 用Javascript获取页面元素的位置

    制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的大小和浏览器窗口的大小 首先,要明确两个基本概念. 一张网页的 ...

  5. JavaScript获取页面元素的常用方法

    1.通过标签获取元素,返回一个数组 var li = document.getElementsByTagName('li');//标签获取元素 li[0].innerHTML;// 查看获取元素的内容 ...

  6. Javascript获取html元素的几种方法

    1.通过id获取html元素 <!DOCTYPE html> <html> <head lang="en"> <meta charset= ...

  7. Javascript获取页面元素相对和绝对位置

    制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的大小和浏览器窗口的大小 首先,要明确两个基本概念. 一张网页的 ...

  8. 使用JavaScript获取select元素选中的value和text

    示例代码如下(js直接写在了html里面,没有写在一个单独的外部文件中): <!DOCTYPE html> <html> <head> <meta name= ...

  9. JavaScript获取HTML元素样式的方法(style、currentStyle、getComputedStyle)

    一.style.currentStyle.getComputedStyle的区别 style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的. currentStyle可以弥补st ...

随机推荐

  1. Java多线程中的进程,线程,并行,并发

    2:什么是进程? 通过任务管理器我们就看到了进程的存在. 而通过观察,我们发现只有运行的程序才会出现进程. 进程:就是正在运行的程序. 进程是系统进行资源分配和调用的独立单位.每一个进程都有它自己的内 ...

  2. Hibernate,JPA注解@Entity

    通过@Entity注解将一个类声明为一个实体bean(即一个持久化POJO类), @Id注解则声明了该实体bean的标识属性. 其他的映射定义是隐式的. 就是说一个持久化POJO类,除了主键ID需要@ ...

  3. 删除 SQL Server 2005 Express 工具

    安装sql server 2008 management,提示错误:Sql2005SsmsExpressFacet 检查是否安装了 SQL Server 2005 Express 工具. 失败,已安装 ...

  4. C#:控制WinForm界面的显示

    控制WinForm界面在屏幕的四个角落显示,具体代码中有说明: using System; using System.Collections.Generic; using System.Drawing ...

  5. ecshop后台增加模块菜单详细教程(图)

    我们有时候针对ecshop如此开发,想在后台加一些菜单,最模板以前提供过教程,但是并非很系统,今天最模板抛砖引玉图文教程告诉大家:如何在ecshop后台增加模块菜单! 首先需要修改四个文件:inc_p ...

  6. 修改ECSHOP系统红包序列号规律

    ECSHOP系统线下发放红包时系统生成的红包序列号是在10000的基础上增加四位随机数字.如果当我们要发放大额度红包的时候,这样的序列号规则难免给人不安全的感觉,万一真的有哪个无聊的人,用一天时间来蒙 ...

  7. javascript——web前端编程

    一.弹出提示框: 连接 function disp_prompt()  {  var name=prompt("请输入您的名字","Bill Gates")  ...

  8. 20145227 《Java程序设计》第1周学习总结

    20145227 <Java程序设计>第1周学习总结 教材学习内容总结 第一周学习Java首先了解了Java的历史,区分了JRE和JDK,并且学会了安装和配置环境.人机交互等基本知识,会编 ...

  9. myeclipse 常用快捷键总结

    1 shift+enter 不管鼠标在当前行的什么位置,重新开启一行(向下) 2 shift+ctrl+enter 不管鼠标在当前行的什么位置,重新开启一行(向上) 3 Ctrl+D     删除一行 ...

  10. [xcode]Xcode查找函数(方法)调用及被调用

    参考资料:http://stackoverflow.com/questions/7145045/find-method-references-in-xcode 这个功能有的说是 Find Caller ...