众所周知，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. ubuntu iptables重启生效：

    ubuntu iptables重启生效:save roles to a file:iptables-save >/etc/iptables.roles edit /etc/network/int ...

  2. java性能优化之HashMap，LinkedHashMap，TreeMap读取大量数据效率的比较

    很多时候,我们用jdbctemplate或mybatis的时候,为了查询通用,会选择使用map数据结构,因为hashmap本身无序,所以为了保证key的有序性,会采用linkedhashmap.所以我 ...

  3. vue路由的异步加载(懒加载)方法

    vue路由的异步加载(懒加载)方法. javascriptvue.jsvue-router  阅读约 2 分钟 vue本身不多介绍.直接说问题,因为vue的所有路由都是加载在一个app.js里的,如果 ...

  4. kotlin基础 字符串比较 equal

    strring.equal(str,boolean) boolean=False,默认值,区分大小写 boolean=True,不区分大小写

  5. 微信支付：URL未注册问题

    起因:一个项目已经做好了,微信支付也调通的,域名 www.xxxx.com ,某天客户需要换域名,改为weixin.xxxx.com, 原先的www转向客户自己的官网,结果换了之后,发现微信支付出错: ...

  6. dmesg 命令的使用范例

    dmesg 命令的使用范例 ‘dmesg’命令设备故障的诊断是非常重要的.在‘dmesg’命令的帮助下进行硬件的连接或断开连接操作时,我们可以看到硬件的检测或者断开连接的信息.‘dmesg’命令在多数 ...

  7. Qt编写安防视频监控系统17-在线地图

    一.前言 在线地图模块在一开始设计整个系统的时候就考虑进去了,主要功能就是在摄像机管理中,提供经纬度信息,然后加载百度地图在浏览器中显示,根据摄像机信息表中的每个摄像机的经纬度信息,自动生成设备点在地 ...

  8. MySQL 5.7 虚拟列 （virtual columns）（转）

    原文地址:https://www.cnblogs.com/raichen/p/5227449.html 参考资料: Generated Columns in MySQL 5.7.5 MySQL 5.7 ...

  9. python 使用 elasticsearch 常用方法（检索）

    #记录es查询等方法 #清楚数据 curl -XDELETE http://xx.xx.xx.xx:9200/test6 #初始化数据 curl -H "Content-Type: appl ...

  10. spring boot 打包引入第三方jar

    本文作者:@Ryan Miao 本文链接:https://www.cnblogs.com/woshimrf/p/springboot-package-3rdparty-lib.html 版权声明: 本 ...