<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta charset="utf-8">

<title>通过class获取元素</title>

<style>

#box div { width:100px; height:100px; border:1px solid red; margin:10px; }

#box .bar { background:#ccc; }

</style>

<script>

window.onload=function (){

    var oDiv=document.getElementById('box');

    var arr=getByClass(oDiv, 'bar');

    alert(arr.length);

};

function getByClass(oParent, sClassName)

{

    var res=[];

    var aTmp=oParent.getElementsByTagName('*');

    for (var i=; i<aTmp.length; i++)

    {

        if (aTmp[i].className.indexOf(sClassName) != -1)
　　　　　　

        {

            res.push(aTmp[i]);

        }

    }

    return res;

}

</script>

</head>

<body>

    <div id="box">

        <div class="bar item"></div>

        <div class="bar"></div>

        <div class="bar"></div>

        <div></div>

        <div></div>

        <p class="bar"></p>

    </div>

</body>

</html>

js通过class获取元素的更多相关文章

  1. 原生JS与JQ获取元素的区别

    刚学JQ不久,有时候可能会把JS和JQ获取元素的方式搞错,接下来获取属性方法什么的就一发不可收拾了,现在把两者获取获取元素的代码整理下. 一.原生JS获取元素. 1.常用的三种方式获取元素对象(将指定 ...

  2. 原生js来写获取元素距离顶部距离，以及滚动条滚动指定距离和时间控制

    这是我在写vue项目里封装的一个公共js类 里面还有一些其他的方法,一并拿过来了 class Public { isDesktop(){ //判断是否为pc端 return (window.scree ...

  3. JS——通过标签获取元素、循环语句、数组去重

    通过标签获取元素: var aLi = document.getElementsByTagName('Li'); aLi[0].style.backgroundColor = 'gold'; 选中部分 ...

  4. js动画之获取元素属性

    首先我们要介绍一些知识 offsetWidth element.offsetWidth = width + padding + border; width 我们也知道element.style.wid ...

  5. js通过class获取元素时的兼容性解决方案

    1:::::方法代码如下:function getByClass(sClass){    var aResult=[];    var aEle=document.getElementsByTagNa ...

  6. js根据className获取元素封装

    虽然有了getElementsByClassName,但是ie低版本不支持,所以我们需要单独定义一个getByClass function getByClass(className,parent){ ...

  7. 7.关于一些dom&&获取元素

    1. 测试点击的是否是span 标签 <span onClick={this.select.bind(this)}>点击</span>   select( e ){  cons ...

  8. js兼容获取元素的样式

    js获取元素的样式的兼容性处理: function getStyle(obj,attr){ return obj.currentStyle?obj.currentStyle[attr]:getComp ...

  9. js和jquery获取当前对象的子元素

    开发中经常遇到需要获取ul下的il对象,个人总结了js和jquery的方法. HTML片断: <ul class="box"> <li>子元素1</l ...

随机推荐

  1. 20145319 《网络渗透》URL攻击

    20145319 <网络渗透>URL攻击 实验步骤 首先启动apache2,打开我们的钓鱼网页,键入命令/etc/init.d/apache2 start 在浏览器中尝试着访问自己的ip地 ...

  2. HttpClient4.5简单使用

    一.HttpClient简介 HttpClient是一个客户端的HTTP通信实现库,它不是一个浏览器.关于HTTP协议,可以搜索相关的资料.它设计的目的是发送与接收HTTP报文.它不会执行嵌入在页面中 ...

  3. P3939 数颜色

    目录 题目 思路1(待修莫队) 思路2(vector+二分) 代码1 代码2 题目 P3939 数颜色 思路1(待修莫队) 哇,这不是莫队模板题吗 3e5,TLE45分 不行 我有信仰啊 pow(n, ...

  4. 分布式系统一致性协议--2PC,3PC

    分布式系统中最重要的一块,一致性协议,其中就包括了大名鼎鼎的Paxos算法. 2PC与3PC 在分布式系统中,每一个机器节点虽然能够明确知道自己在进行事务操作过程中的结果是成功或是失败,但是却无法直接 ...

  5. JavaScript 装饰者模式（this运用）

    例: function ConcreteClass() { this.performTask = function () { this.preTask(); console.log('doing so ...

  6. phantomjs在win10下的安装

    phantomjs只能通过官网下载,下载地址:http://phantomjs.org/download.html. 1.最好下载在英文文件夹下.下载完成后,解压. 2.进入bin文件,右击属性,将p ...

  7. Future Works on P4

    Future Works on P4 P4 and NV: MPvisor, Hyper4, HyperV, Flex4 P4 and NFV P4 and Network Cache P4 and ...

  8. undefined!=false之解 及==比较的规则

    JS中有一个基本概念就是: JavaScript中undefined==null 但undefined!==null undefined与null转换成布尔值都是false 如果按照常规想法,比如下面 ...

  9. HHVM代码规范

    原文戳我 本文旨在为HHVM编写C++代码提供一种指南,包括了什么时候.怎么使用各种语言功能,以及代码的格式.我们的目标是确保代码持续高可用的同时,还能容易被阅读和参与贡献,尤其是对新人而言. HHV ...

  10. Python的函数参数传递

    a = 1 def fun(a): a = 2 fun(a) print a # 1 a = [] def fun(a): a.append(1) fun(a) print a # [1]