代码测试是ie5+；

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

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

  1. <span style="font-size:18px;"><!DOCTYPE HTML>
  2. <html lang="en-US">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <script type="text/javascript">
  7. function getClassName(classname,idbox){   /*创建一个函数，可以传入两个参数，指定选择的类，指定选择类的范围*/
  8. var box=document.getElementById(idbox);  //获取ID为第二个参数的元素
  9. var cbox=box || document;  //检测box是否存在（否有传入第二个参数），如果不存在则把document赋予变量cbox（确定指定类的父容器即类的范围）如果有则在指定的容器中寻找类，如果没有则在整个文档中寻找。
  10. var cbox_elem=cbox.getElementsByTagName('*'); //获取指定容器或页面中所有元素
  11. var ctag=new Array(); /*创建一个空数组用来后面放置含有指定类的元素*/
  12. for(var i=0;i<cbox_elem.length;i++){   /*遍历容器中的所有元素*/
  13. var cur_else=cbox_elem[i];  /*把当前遍历的元素赋值给变量cur_else*/
  14. var classnames=cur_else.className.split(' ');
  15. /*把当前遍历的元素中的所有类用空格分开成一个数组并赋值给变量classnames*/
  16. for(var j=0;j<classnames.length;j++){  /*遍历当前元素中里的每个类*/
  17. if(classnames[j]==classname){  /*当前遍历中的类和第一个参数是否相等*/
  18. ctag.push(cur_else); /*相等则把拥有该类的元素添加到先前创建好的数组中*/
  19. break; /*退出这个类循环直接跳到外层元素for语句*/
  20. }
  21. }
  22. }
  23. return  ctag; /*把数组返回给调用的代码，这里把数组返回给变量all_li*/
  24. }
  25. window.onload=function(){
  26. var all_li=getClassName("pp","y");
  27. alert(all_li.length)
  28. }
  29. </script>
  30. </head>
  31. <body>
  32. <!-- 兼容IE5+ -->
  33. <ul id="y">
  34. <li class="pp uu"></li>
  35. <li class="pp"></li>
  36. <li class="pp"></li>
  37. <li ></li>
  38. <li ></li>
  39. </ul>
  40. </body>
  41. </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. ［转］AngularJS的$resource

    转自:http://blog.csdn.net/violet_day/article/details/17403207 $http $http服务是基于$q服务的,提供了promise封装,它接受一个 ...

  2. 电视直播用的.m3u8 PC端和移动端地址 【流媒体播放测试专用】

    北邮ivi测试频道 26个高清频道 IPv4 有PC端和移动端地址 [复制链接]     lebo 5 主题 0 好友 1588 积分 卫视少尉 UID 392347 注册时间 2013-11-8 最 ...

  3. WKWebView与Js实战(OC版)

    前言 上一篇专门讲解了WKWebView相关的所有类.代理的所有API.那么本篇讲些什么呢?当然是实战了! 本篇文章教大家如何使用WKWebView去实现常用的一些API操作.当然,也会有如何与JS交 ...

  4. 织梦系统中出现DedeTag Engine Create File False提示原因及解决方法

    今天更新网站时dedecms系统时,遇到一个问题:DedeTag Engine Create File False  出现这样的提示. 其实这也不算是什么错误,我个人觉得最重要的一点就是根目录下没有给 ...

  5. C#:简单线程样例

    1.定义线程类及内部事件 using System; using System.Collections.Generic; using System.Text; using System.Threadi ...

  6. MySQL数据类型总结

    MySQL中的数据类型大的方面来分,可以分为:日期和时间.数值,以及字符串.下面就分开来进行总结. 日期和时间数据类型 MySQL数据类型 含义 date 3字节,日期,格式:2014-09-18 t ...

  7. Oracle 11gR2中启动Scott用户的方法

    Oracle 中启动 Scott 用户 的方法 , 在 Oracle11gR2, (g 代表‘网络’的意思) 数据库中 Scott 这个用户 安装时是被锁定的,安装 Oracle的时候 ,你可以直接选 ...

  8. ScheduledExecutorService定时周期执行指定的任务

    示例代码 package com.effective.common.concurrent.execute; import java.text.DateFormat; import java.text. ...

  9. hihoCoder 数论五·欧拉函数

    题目1 : 数论五·欧拉函数 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi和小Ho有时候会用密码写信来互相联系,他们用了一个很大的数当做密钥.小Hi和小Ho约定 ...

  10. JVM的classloader(转)

    Java中一共有四个类加载器,之所以叫类加载器,是程序要用到某个类的时候,要用类加载器载入内存.    这四个类加载器分别为:Bootstrap ClassLoader.Extension Class ...