众所周知，JS获取DOM有个getElementsByClassName，非常方便，但是呢，为了兼容某些浏览器(你懂的)。只能 进行封装下了。解决方法如下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>getElementsByClassName 封装</title>

</head>

<body>

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

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

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

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

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

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

</body>

<script>

    function getElementsByClassName(name, attrbuteName) {

        var arr = [];

        if (document.getElementsByClassName) {

            // 如果支持这个属性，直接获取

            arr = document.getElementsByClassName(name)

        } else {

            // 如果 不支持

            var attr = attrbuteName ? attrbuteName : "*";///如果指定标签名称则用

            var tagNameArr = document.getElementsByTagName(attr);

            for (var index = ; index < tagNameArr.length; index++) {

                var classNameArr = tagNameArr[index].className.split(" ")

                for (var j = ; j < classNameArr.length; j++) {

                    if (classNameArr[j] === name) {

                        arr.push( tagNameArr[index])

                    }

                }

            }

        }

        return arr;

    }

    getElementsByClassName("item","div")[].style.color = "red"

</script>

</html>

getElementsByClassName兼容 封装的更多相关文章

  1. requestAnimationFrame 完美兼容封装

    完美兼容封装: (function() { var lastTime = 0; var vendors = ['webkit', 'moz']; for(var x = 0; x < vendo ...

  2. getElementsByClassName - 兼容详细介绍

    概述 JavaScript中getElementsByClassName()方法IE8及以下不支持.本文通过使用正则表达式实 现1个兼容方案. 本文内容分为3个部分. 浏览器原生getElements ...

  3. JS-特效 ～ 05. 缓动框架兼容封装／回掉函数／兼容透明度／层级、旋转轮播图、正则表达式、验证表单注册账号、

    缓动函数中opcity  写百分值的值 JS一般不用小数运算,会照成精度丢失 元素的默*认透明度是 层级一次性赋值,不缓动 利用for…in为同一个父元素的子元素绑定属性 缓动框架兼容封装/回掉函数/ ...

  4. 兼容IE8以下，获取className节点的元素(document.getElementsByClassName()兼容写法)。

    因为ie8一下不兼容                 document.getElementsByClassName()                 功能:通过class的名字获取符合条件的元素 ...

  5. 解决getElementsByClassName兼容问题

    getElementsByClassName这个方法很常用,但是只有较新的浏览器才兼容,所以我们需要自己写个方法,解决这个问题,使它能够兼容各个浏览器. function getElementsByC ...

  6. 让getElementsByClassName兼容

    function getElementsByClassName(node, classname){ if(node.getElementsByClassName){ //使用现有方法 return n ...

  7. javascript中document.getElementsByClassName兼容性封装方法一

    var getElmsByClsName = function(className, results) { results = results || []; // 判断浏览器是否支持 getEleme ...

  8. getElementsByClassName兼容低版本浏览器

    var getElementsByClassName = function (searchClass, node,tag) { if(document.getElementsByClassName){ ...

  9. 针对css3特性浏览器兼容 封装less

    //--------------------------------------------------- // LESS Prefixer //--------------------------- ...

随机推荐

  1. 用shedlock实现分布式定时任务锁

    添加包 <dependency>     <groupId>net.javacrumbs.shedlock</groupId>     <artifactId ...

  2. epool与select有什么区别

    select在一个进程中打开的最大fd是有限制的,由FD_SETSIZE设置,默认值是2048.不过 epoll则没有这个限制,它所支持的fd上限是最大可以打开文件的数目,这个数字一般远大于2048, ...

  3. Java基础 awt Graphics2D 生成矩形图片并向其中画一条直线

        JDK :OpenJDK-11      OS :CentOS 7.6.1810      IDE :Eclipse 2019‑03 typesetting :Markdown   code ...

  4. NodeJs FS 文件系统模块

    1. fs.stat 检测是文件还是目录 fs.stat('html',function(err,stats){ if(err){ console.log(err); return false; } ...

  5. MacOSX 虚拟机与宿主机的网络配置

    环境:MacOSX.VMware Fusion11.5.CentOS6 比较重要的两个网卡 安装虚拟机后,宿主机会多出几个网卡,其中vmnet1对应的Bridge(桥接方式),vmnet8对应NAT方 ...

  6. promise简单实现

    function isFunction(fn){ return Object.prototype.toString.call(fn) === '[object Function]'; } let ST ...

  7. PCL中outofcore模块---基于核外八叉树的大规模点云的显示

    写在前面   最近公众号的活动让更多的人加入交流群,尝试提问更多的我问题,群主也在积极的招募更多的小伙伴与我一起分享,能够相互促进.   这里总结群友经常问,经常提的两个问题,并给出我的回答: (1) ...

  8. k8s记录-k8s部署参考

    一.环境准备 yum -y install epel-release yum -y install wget nmap lsof iotop lrzsz ntpdate tree rm -rf /et ...

  9. python -m SimpleHTTPServer搭建简单HTTP服务

    PYTHON自带HTTP服务,命令: python -m SimpleHTTPServer 使用上述命令将当前目录发布到8000端口,为当前进行,不是后台运行 指定端口: python -m Simp ...

  10. 数学黑洞：卡普雷卡尔常数的php算法实现

    首先看一篇文章: 英国广播公司报道,6174乍看没什么奇特之处,但是,自从1949年以来,它一直令数学家.数字控抓狂.痴迷. 不管你挑的四位数是什么,早早晚晚你都会遇到6174:而且,遇到6174就只 ...