js通过class获取元素

<!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=0; 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>

时间： 2024-10-12 11:01:53

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

JS中如何获取元素

1.通过ID名称来获取元素: document get element by id 'link' document.getElementById('link'); 事件:鼠标事件.键盘事件.系统事件.表单事件.自定义事件例:onclick 鼠标点击事件 onmouseover 鼠标移入事件 onmouseout 鼠标移出事件如何添加事件: 元素.事件 (元素.onmouseover) 函数:可以理解为-命令,做一些事... function(函数的关键词) 语法: function abc(

js通用方法获取元素,节点父子关系查找

/* *通用方式来获取元素 * 1.通过id来获取元素document.getElementById('属性名') * 2.通过便签名来获取元素document.getElementsByTagName('属性名');得到的是一个数组 * 3.通过class属性来获取元素有兼容性问题document.getElementsByClassName('class属性名');得到是一个数组 * 4.通过name属性来获取元素存在兼容性问题document.getElementsByName('name

js根据类名获取元素的底层原理

页面代码片段 <div></div> <div class="box fl">这是box</div> <div class="colorRed box3">这是box</div> <div></div> <div class="box">这是box</div> <div id="text"> &l

js动画之获取元素属性

首先我们要介绍一些知识 offsetWidth element.offsetWidth = width + padding + border; width 我们也知道element.style.width 这个属性一般用来修改属性,那么在获取这个属性的时候, 如果这个元素的的样式是定义在css的文件或者头样式中,都是获取不到的,只有行内样式才是获取到 <!DOCTYPE html> <html lang="en"> <head> <meta c

js学习总结----获取元素的偏移量offset

前言:以前一直是看别人写的,然后学习点东西,现在也把自己的学习记录下来,给大家一个学习的机会,欢迎大家多多评论和推荐哈,共同进步.竟然还有六个人关注我了 ,哈哈开心.我会继续写下去的.. null和undefined都代表没有,但是null是属性存在值不存在,undefined是连这个属性都不存在 //例如 document.parentNode//浏览器天生自带的一个属性:父亲节点的属性 null (因为一个页面中的document已经是最顶级元素了,它没有父亲) document.pare

js通过class获取元素getElementsByClassName函数封装

function getElementsByClassName( parent,tag,className ){ var aEls = parent.getElementsByTagName(tag); var arr = []; for (var i = 0; i < aEls.length; i++) { var aClassName = aEls[i].className.split(' '); for (var j = 0; j < aClassName.length; j++) {

js根据className获取元素封装

虽然有了getElementsByClassName,但是ie低版本不支持,所以我们需要单独定义一个getByClass function getByClass(className,parent){ var oParent=parent?document.getElementById(parent):document; // 判断parent参数是否存在,不存在,使用document选区文档所有class eles=[]; elements=oParent.getElementsByTagNam

js闭包法获取元素下标值

一开始的想法是: var a = document.getElementsByTagName('a');for(var i=0;i<a.length;i++){ a[i].onclick = function(){ alert(this.innerHTML); alert(this.i); };};结果每次都是i计算的数值: 通过问大神后,使用闭包解决: var a = document.getElementsByTagName('a');for(var i=0;i<a.lengt

js兼容获取元素的样式

js获取元素的样式的兼容性处理: function getStyle(obj,attr){ return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr]; } 使用方法: 如需要获取id为Div1的left值,就可以写成: var oDiv = document.getElementById("div1"); getStyle(oDiv,"left"); 就可以获取到这个div的