getElementsByClassName - 兼容详细介绍

最新推荐文章于 2024-04-02 20:25:59 发布

凯尔kyle

最新推荐文章于 2024-04-02 20:25:59 发布

阅读量214

点赞数

分类专栏： WEB 文章标签：字符串 java js javascript 正则表达式

本文链接：https://blog.csdn.net/xys2015/article/details/109340144

版权

WEB 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

概述

JavaScript中getElementsByClassName()方法IE8及以下不支持。本文通过使用正则表达式实
现1个兼容方案。
本文内容分为3个部分。

浏览器原生getElementsByClassName()功能和用法。
兼容方案用到的正则表达式理解。
完整代码示例。

大家不用一听到正则表达式就慌，本方案用到的正则表达式并不复杂，而且我也会详细解释的。

原生getElementsByClassName

语法

var elements = document.getElementsByClassName(names);
var elements = rootElement.getElementsByClassName(names);

names可以是多个类名，用空格分开。
返回值elements是一个元素数组。
若果用rootElement调用，则只在该元素下搜索。

示例

// 返回所有类名是test的元素
document.getElementsByClassName('test');

// 返回所有同时具有red和test类的元素
document.getElementsByClassName('red test');

// 在id为main这个元素里，拿出所有具有类名test的元素
document.getElementById('main').getElementsByClassName('test');

// 直接拿到类名为test的第一个元素
var testTarget = document.getElementsByClassName("test")[0];

正则表达式简要分析

实现兼容方案的整体思路是：使用getElementsByTagName("*")全部元素，然后循环遍历把这些
元素的类名都拿出来，拿出这些类名之后，最关键的问题就是判断，这些类名是不是符合我要查询的
类名，这就要用到正则表达式来比较，请看下面的代码：

function getElementsByClassName(names, rootElement) {
    if (!rootElement) {
        rootElement = document;
    }

    var classElements = [];
    var allElements = rootElement.getElementsByTagName("*");
    // (^|\s)names(\s|$)
    pattern = new RegExp("(^|\\s)" + names + "(\\s|$)");

    for (var i = 0, j = 0; i < allElements.length; i++) {
        if (pattern.test(allElements[i].className)) {
            console.log(allElements[i]);
            classElements[j] = allElements[i];
            j++;
        }
    }

    return classElements;
}

上面的代码最难理解的就是正则表达式部分。首先，我默认你已经有一点点正则表达式基础，如果听
都没听过正则表达式，可以考虑看看我写的这篇正则表达式 - JavaScript描述，http://www.cnblogs.com/asheng2016/p/7401391.html

OK，首先我们梳理一下代码逻辑，看看我们需要什么样的正则表达式。假设我们要查找的类名有下面
这几种情况："ab", "ab cd", "ab cd ef", "ab cd ef gh"。也就是说，如果我们能找到这个类
并成功匹配，那么这个类要么在开头，要么在中间，要么在末尾，只有这三种情况。

我们使用(^|\s)names(\s|$)这个正则表达式就可以实现对上述三种情况的匹配，其中names
变量就表示类名字符串的所有情况(3种)。该正则表达式的图形化含义如下：

根据图像我们理解该正则表达式，首先中间是已知的类名，这没问题，然后就是这个类名的两边可能
存在的情况，可能是开头+类名+结尾、空格+类名+空格、开头+类名+空格等。

\s 表示匹配类名，并且因为在字符串中\也有转义的功能，所以在new RegExp中写成\\

完整函数及测试

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>getElementsByClassName 兼容</title>
</head>
<body>
    
<p><pre>(^|\s)names(\s|$)</pre></p>
<div class="ab cd">ab cd</div>
<div class="a c">a c</div>
<script>

function getElementsByClassName(names, rootElement) {
    if (!rootElement) {
        rootElement = document;
    }
    
    if (rootElement.getElementsByClassName) {
        // console.log("走的是原生方法");
        return rootElement.getElementsByClassName(names);
    }
    
    // console.log("走的是兼容方案");
    var classElements = [];
    var allElements = rootElement.getElementsByTagName("*");
    pattern = new RegExp("(^|\\s)" + names + "(\\s|$)");

    for (var i = 0, j = 0; i < allElements.length; i++) {
        if (pattern.test(allElements[i].className)) {
            classElements[j] = allElements[i];
            j++;
        }
    }

    return classElements;
}

var mt = getElementsByClassName("ab");
console.log(mt[0].className); // "ab cd"

var mt2 = getElementsByClassName("a");
console.log(mt2[0].className); // "a c"

var mt3 = getElementsByClassName("ac");
console.log(mt3); // []

// 亲测在IE8下可用
</script>
</body>
</html>

参考链接

http://regexper.com https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

凯尔kyle

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
getElementsByClassName - 兼容详细介绍

概述JavaScript中getElementsByClassName()方法IE8及以下不支持。本文通过使用正则表达式实现1个兼容方案。本文内容分为3个部分。浏览器原生getElementsByClassName()功能和用法。兼容方案用到的正则表达式理解。完整代码示例。大家不用一听到正则表达式就慌，本方案用到的正则表达式并不复杂，而且我也会详细解释的。原生ge...
复制链接

扫一扫