代码测试是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获取类元素的更多相关文章
-
JavaScript获取html元素的实际宽度和高度
一.JavaScript获取html元素宽高 1.宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通过#div1.style.width拿不到宽度,而通过#div1.offs ...
-
用javaScript获取页面元素值
用JavaScript获取页面元素常见的三种方法: getElementById() ...
-
javascript 获取iframe元素的方法
javascript 获取iframe元素的方法 第一种: $("#IframeID").contents().find("div"); 第二种: $(win ...
-
用Javascript获取页面元素的位置
制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的大小和浏览器窗口的大小 首先,要明确两个基本概念. 一张网页的 ...
-
JavaScript获取页面元素的常用方法
1.通过标签获取元素,返回一个数组 var li = document.getElementsByTagName('li');//标签获取元素 li[0].innerHTML;// 查看获取元素的内容 ...
-
Javascript获取html元素的几种方法
1.通过id获取html元素 <!DOCTYPE html> <html> <head lang="en"> <meta charset= ...
-
Javascript获取页面元素相对和绝对位置
制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的大小和浏览器窗口的大小 首先,要明确两个基本概念. 一张网页的 ...
-
使用JavaScript获取select元素选中的value和text
示例代码如下(js直接写在了html里面,没有写在一个单独的外部文件中): <!DOCTYPE html> <html> <head> <meta name= ...
-
JavaScript获取HTML元素样式的方法(style、currentStyle、getComputedStyle)
一.style.currentStyle.getComputedStyle的区别 style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的. currentStyle可以弥补st ...
随机推荐
-
Python 字符串
Python访问字符串中的值 Python不支持单字符类型,单字符也在Python也是作为一个字符串使用. Python访问子字符串,可以使用方括号来截取字符串,如下实例: #!/usr/bin/py ...
-
CISCO 双线接入MAP配置详解
随着我国宽带技术的普及,各个公司都会有一至二条Internet接入线路,这些线路可能由电信.网通.长宽.联通等不同的IS提供,尽管他们在局端采用的技术可能有不同,但对客户而言都是同样接入方式,以太 ...
-
安卓百度地图开发so文件引用失败问题研究
博客: 安卓之家 微博: 追风917 CSDN: 蒋朋的家 简书: 追风917 博客园: 追风917 # 问题 首先,下面的问题基本都是在Android Studio下使用不当导致,eclipse是百 ...
-
转:JS在文本域鼠标指定位置插入文本-柯乐义
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
-
linux脚本初体验
前言 第一次写linux脚本,有点紧张. 1. 写一个寻找特定用户的脚本文件? #! /bin/sh who | grep $1 其中脚本第一行用来告诉kernel去使用/bin/sh来解释这个脚本: ...
-
Tomcat开发技术之与HTTP服务器的集成
Tomcat最主要的功能是提供Servlet/jsp容器,尽管它也可以作为独立的Java Web服务器,它在对静态资源(如Html文件或图像文件)的处理速度,以及提供的Web服务器治理功能方面都不如其 ...
-
Elasticsearch重要配置
虽然Elasticsearch需要很少的配置,但是有一些设置需要手动配置,并且必须在进入生产之前进行配置. path.data and path.logs cluster.name node.nam ...
-
&#39;gbk&#39; codec can&#39;t encode character解决方法
使用Python写文件的时候,或者将网络数据流写入到本地文件的时候,大部分情况下会遇到:UnicodeEncodeError: 'gbk' codec can't encode character ' ...
-
day 24 二十四、组合、继承、方法重写和重用、super()
一.组合 1.定义:自定义类的对象作为类的属性 A类的对象具备某一个属性,该属性的值是B类的对象 基于这种方式就把A类与B类组合到一起 对象既能使用A类中的数据与功能,也能使用B类中的数据与功能 2. ...
-
[WeChall] Training: Encodings I (Training, Encoding)
Training: Encodings I (Training, Encoding) We intercepted this message from one challenger to anothe ...