众所周知，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. Mapbox矢量瓦片标准(mapbox vector-tile-spec)

    目录 1. 目标 2. 文件格式 2.1. 文件后缀 2.2 MIME类型 3. 投影和范围 4. 内部结构 4.1. 图层 4.2. 要素 4.3. 几何图形编码 4.4. 要素属性 4.5. 示例 ...

  2. mark_Linux_wc

    Linux wc命令 Linux wc命令用于计算字数. 利用wc指令我们可以计算文件的Byte数.字数.或是列数,若不指定文件名称.或是所给予的文件名为"-",则wc指令会从标准 ...

  3. SQL调用另一台服务器的表及存储过程（SQL函数openrowset()的使用以及相关问题处理）

    --查询表select * from openrowset('SQLOLEDB', 'IP'; 'sa'; '密码',数据库名称.dbo.表名称) --查询存储--示例1select * from o ...

  4. IDEA 使用SequenceDiagram插件绘制时序图

    最近看代码,由于代码的调用层级深度比较多,层层深入到某处时,已经忘记了身处何处,虽然自己可以使用一些画图工具来时序图,但是,这种情况下,自己画时序图很繁琐,比较浪费时间,上网找了一下IDEA有一个插件 ...

  5. java 欢迎页 主页 设置为servlet的方法

    [参考]Java Web 设置默认首页 [参考]设置servlet或action作为欢迎页面 1. 使用HTML<meta>标签跳转至servlet  <META HTTP-EQUI ...

  6. Executors创建四种线程池

    newCachedThreadPool创建一个可缓存线程池,如果线程池长度超过处理需要,可灵活回收空闲线程,若无可回收,则新建线程.newFixedThreadPool 创建一个定长线程池,可控制线程 ...

  7. shell基础知识6-在不按回车键的情况下读入N个字符

    Bash命令 read 能够从键盘或标准输入中读取文本.我们可以使用 read 以交互的形式读取用 户输入,不过 read 能做的可远不止这些.编程语言的大多数输入库都是从键盘读取输入,当回 车键按下 ...

  8. LwIP应用开发笔记之七：LwIP无操作系统HTTP服务器

    前面我们实现了TCP服务器和客户端的简单应用,接下来我们实现一个基于TCP协议的应用协议,那就是HTTP超文本传输协议 1.  HTTP协议简介   超文本传输协议(Hyper Text Transf ...

  9. EF Core使用遇到的问题

    目录 EF Core速度问题 问题描述 EF使用方法1,每一行存储一次(400条/s) EF使用方法2,链接不释放 (40条/s) EF使用方法3,多次add,一次SaveChanges(400条/s ...

  10. 阿里云k8s事件监控

    事件监控是Kubernetes中的另一种监控方式,可以弥补资源监控在实时性.准确性和场景上的缺欠.Kubernetes的架构设计是基于状态机的,不同的状态之间进行转换则会生成相应的事件,正常的状态之间 ...