众所周知，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. springboot装配OkHttp组件

    在SpringBoot应用中,发送Http通常我们使用RestTemplate,但有部分组件底层是使用OkHttp进行Http的操作,而且OKHttp也是一个很优秀的HTTP组件. RestTempa ...

  2. ERROR: type "sum" does not exist

    开发问pg中执行一个简单的语句,多次报错: > ERROR: type "sum" does not exist LINE 1: SELECT SUM ^ 看看具体的语句,其 ...

  3. easyui的datagrid的使用记录

    datagrid是在 table的基础上变化而来的, 而不是在div的基础上来的. 从div来变成 datagrid,样式的设置还是是比较麻烦的. dg=datagrid 的标题 来源于 column ...

  4. 关于使用sudo找不到环境变量的问题

    参考这里:https://www.cnblogs.com/zhongshiqiang/p/10839666.html 使用sudo -E 保留当前用户环境,这时就不会存在找不到环境变量的问题了.

  5. 【Base】死锁产生的四个必要条件

    死锁产生的四个必要条件 互斥条件:资源是独占的且排他使用,进程互斥使用资源,即任意时刻一个资源只能给一个进程使用,其他进程若申请一个资源,而该资源被另一进程占有时,则申请者等待直到资源被占有者释放. ...

  6. WebGL学习笔记（十六）：遮罩

    这里总结下几种WebGL中实现遮罩的方法. 模板缓冲 模板缓冲可以实现渲染剔除,但是我们之前的学习里,剔除范围是基于上一次渲染的结果,且上一次的渲染也会进行显示,这样的话并不适合用来实现遮罩. 我们想 ...

  7. Qt编写安防视频监控系统16-设备播放

    一.前言 设备播放模块是后面增加的,核心就是通过组合rtsp视频流地址来播放实时视频和历史视频,目前市面上很多厂家比如排第一的海康都是支持直接rtsp通过NVR来播放某个通道视频流和回放某个通道的视频 ...

  8. 【linux基础】如何配置ubuntu系统为静态IP地址

    前言 连接远程server重启的时候发现IP发生变化,影响远程连接,此时,需要将server配置为静态IP. 系统环境 ubuntu16.04 操作过程 1. 设置IP和DNS command sud ...

  9. firewall详解

    官方文档介绍地址:https: //access.redhat.com/documentation/en-US/Red_Hat_Enterprise_Linux/7/html/Security_Gui ...

  10. 单选 textarea 赋初值

    自闭合标签赋初值用$().val(),比如:<input type="text" name="text" value="123"> ...