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++) {
      if(aClassName[j] == className){
        arr.push(aEls[i]);
        //如果className里面包含‘box‘ 则跳出循环
        break; //防止一个元素出现多次相同的class被添加多次
      }
    };
  };
  return arr;
}

时间: 2024-10-22 00:16:32

js通过class获取元素getElementsByClassName函数封装的相关文章

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通过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; } #

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根据className获取元素封装

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

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

获取样式属性函数封装

在很多的时候都会用到这个函数,如果每用一次都写一次的话会非常麻烦,尽管是一个非常短的函数: function getStyle(obj,name){ return obj.currentStyle?obj.currentStyle[name]:getComputedStyle(obj,false)[name]; }

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