众所周知，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. arcpy地理处理工具案例教程-生成范围-自动画框-深度学习样本提取-人工智能-AI

    arcpy地理处理工具案例教程-生成范围-自动画框-深度学习样本提取-人工智能-AI 商务合作,科技咨询,版权转让:向日葵,135-4855_4328,xiexiaokui#qq.com 目的:对面. ...

  2. tp使用ajaxReturn返回二维数组格式的字符串,前台如何获取非乱码

    参考: https://www.cnblogs.com/jiqing9006/p/5000849.html https://blog.csdn.net/zengxiangxuan123456/arti ...

  3. 运维笔记--Docker文件占用磁盘空间异常处理

    场景描述: 1. 服务器运行一段时间后,发现系统盘磁盘空间在不断增加,一开始的时候,不会影响系统,随着时间的推移,磁盘空间在不断增加,直到有一天你会发现系统盘剩余空间即将使用完,值得庆幸的是,如果您使 ...

  4. vue---将json导出Excel的方法

    在做数据表格渲染的时候,经常遇到的需求的就是将导出excel,下面是使用vue进行项目数据进行导出的方法. 一.安装依赖 npm i -S file-saver npm i -S xlsx 二.在sr ...

  5. JS的base64编码解码

    Unicode问题解法 有个小坑是它只支持ASCII. 如果你调用btoa("中文")会报错: Uncaught DOMException: Failed to execute ' ...

  6. LeetCode 100. Same Tree （判断树是否完全相同）

    100. Same Tree Given two binary trees, write a function to check if they are the same or not. Two bi ...

  7. ajaxSubmit的data属性

    https://www.cnblogs.com/shiyou00/p/6841801.html js-art-template 修改一处代码的时候发现了让我疑惑的地方.ajaxSubmit的data用 ...

  8. PMP 第12~13章错题总结

    1.合同解释应该遵循几个主要原则: 1)主导语言原则 2)适用法律原则 3)整体解释原则 4)公平诚信原则2.合同收尾包括的工作: 1)产品核实 2)可交付成果验收 3)财务结算 4)退还保证金或担保 ...

  9. Centos7安装部署MongoDB教程

    安装方式: RPM包安装 安装步骤: 一.下载RPM包 下图是需要注意的事项.其一选择MongoDB的社区版本,默认是企业版本.其二,选中版本后,在下方会出现下载地址,直接复制下载即可  二.安装并查 ...

  10. 大数据分析常用去重算法分析『Bitmap 篇』

    大数据分析常用去重算法分析『Bitmap 篇』  mp.weixin.qq.com 去重分析在企业日常分析中的使用频率非常高,如何在大数据场景下快速地进行去重分析一直是一大难点.在近期的 Apache ...