JavaScript跨浏览器获取页面中相同class节点的方法


Posted in Javascript onMarch 03, 2015

网页开发时,在很多时候我们需要操作相同类名的元素,即class相同的元素。昨天参加笔试,有一道相关的题目没答上来:

JavaScript获取页面中class为test的节点

于是收集了一些相关的资料,在本文中列举了两种我觉得比较好的方法,不足之处,还望大家批评指正。如果大家有更好的方法,希望可以分享。

Solution1 Jeremy Keuth方案

Jeremy Keuth大叔在《JavaScript DOM 编程艺术》(第2版)(英文:DOM Scripting-Web Design with JavaScript and the Document Object Model)一书的第三章第四节中讲到了getElementsByClass这个方法,并讲到了如何在不支持该属性的浏览器(IE6,IE7和IE8,让我们鄙视他们)中应用这一方法,摘录在此,个别地方有修改。

HTML5 DOM中新增了一个方法让我们通过class属性中的类名来访问元素,这就是:getELementsByClassName,由于方法比较新,某些的DOM实现里还没有,因此在使用的时候要当心。下面我们先来看一看这个方法能帮我们做什么,然后在讨论怎么可靠的使用该方法。
与getELementsByTagName方法类似,getElementsByClassName也只接受一个参数,就是类名:

getElementsByClassName(class)

这个方法的返回值也与getElementsByTagName类似,都是一个具有相同类名的元素的数组,下面这行代码返回的就是一个数组,其中包含类名为“sale”的所有元素:
document.getElementsByClassName("sale")

使用这个方法还可以查找那些带有多个类名的元素。要指定多个类名,只要在字符串参数中用空格分隔类名即可。例如,在<script>标签中添加下面这行代码:
alert(document.getElementsByClassName("sale important").length);

完整代码

<!DOCTYPE html>

<html> 

<head>

    <meta charset="utf-8"> 

    <title>Shopping List</title>

</head> 

<body>

    <h1>What to buy</h1>

    <p title="a gentle reminder">Don't forget to buy this stuff.</p>

    <ul id="purchase">

        <li>A thin of beans</li>

        <li class="sale">Cheese</li>

        <li class="sale important">Milk</li>

    </ul>

    <script>

         alert(document.getElementsByClassName("sale important").length);

    </script>

</body>

</html>

你会看到警告框中显示1,表示只有一个元素匹配,因为只有一个元素同时带有”important”和”sale”类名。注意,即使在元素的class属性中,类名的顺序是”sale important”而非参数中指定的”important sale”,也会照样匹配该元素。不仅类名的实际顺序不重要,就算元素还带有更多类名也没有关系。与使用getELementsByTagName一样,也可以组合使用getElementsByClassName和getElementById。如果你想知道在id为purchase的元素中有多少类名包含test的列表项,可以先找到那个特定的对象,然后再调用getElementsByClassName:

var shopping=document.getElementById("purchase");

var sales = shopping.getElementsByClassName("sale");

这样,sales数组中包含的就只是位于”purchase”列表中的带有”sales”类的元素,运行下面这行代码,就会看到sales数组包含两项:

alert(sales.length);

这个getELementsByClassName方法非常有用,但只有较新的浏览器(Safari 3.1,Chorme,Firefox 3 and Opera 9.5以上)才支持它。为了弥补这一不足,DOM脚本程序员需要使用已有的DOM方法来实现自己的getElementsByClassName,有点像成人礼似的。而多数情况下,他们的实现过程都与下面这个getElementsByClassName大致相似,这个函数能适用于新老浏览器。

function getElementsByClassName(node,classname){

    if(node.getElementsByClassName){

         return node.getElementsByClassName(classname);

    }else{

        var results = [];

        var elems = node.getElementsByTagName("*");

        for(var i=0;i<elems.length;i++){

            if(elems[i].className.indexOf(classname)!=-1){

                results[results.length]=elems[i];

            }

        }

    return results;

    }

}

这个getElementsByClassName函数接受两个参数。第一个node表示DOM树中的搜索起点,第二个classname就是要搜索的类名了。如果传入节点上已经存在了适当的getElementsByClassName函数,那么这个新函数就直接返回相应的节点列表。如果getElementsByClassName函数不存在,这个新函数就会循环遍历所有标签,查找带有相应类名的元素。

这个方法的缺点是不适用于多个类名。

如果使用这个函数来模拟前面取得购物列表的操作,就可以这样写:

var shopping=document.getElementById("purchase");

var sales = shopping.getElementsByClassName(shopping,"test");

console.log(sales);

因此,要解决文章开头的那道题目,所用代码如下:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Shopping List</title>

</head>

<body>

    <h1>What to buy</h1>

    <p title="a gentle reminder">Don't forget to buy this stuff.</p>

    <ul id="purchase">

        <li>A thin of beans</li>

        <li class="sale">Cheese</li>

        <li class="sale important">Milk</li>

    </ul>

<script>

    function getElementsByClassName(node,classname){

        if(node.getElementsByClassName){

            return node.getElementsByClassName(classname);

        }else{

            var results = [];

            var elems = node.getElementsByTagName("*");

            for(var i=0;i<elems.length;i++){

               if(elems[i].className.indexOf(classname)!=-1){

                   results[results.length]=elems[i];

               }

            }

            return results;

        }

    }

    var body = document.getElementsByTagName("body")[0];

    var sales= getElementsByClassName(body,"sales");

    console.log(sales);

</script>

</body>

</html>

Solution2 Robert Nyman方案

搜索匹配的DOM元素的方法还有很多,但真正高效的却不多,Jeremy Keuth大叔的方法有一个缺点就是不能用于多个类名,2008年,Robert Nyman在文章 The Ultimate GetElementsByClassName, Anno 2008中提供了自己的解决方案。在2005年,Robert大叔就已经给出了自己的getElementsByClassName的函数,在2008年的时候,修改了部分代码,添加了许多新的功能:

1.如果当前浏览器支持getElementsByClassName函数,则调用该原生函数;
2.如果当前浏览器支持则使用XPath;//小飞鱼:一种浏览器内置的定位XML文档的强大方式,不过浏览器支持方面不统一
3.支持多个类名的搜索,不计先后顺序;
4.返回真正的节点数组,而不是原生的一个nodelist。//小飞鱼:原生的getElementsByClassName方法返回的是一个NodeList对象,它很像数组,有length和数字索引属性,但并不是数组,不能用pop,push等数组特有的方法,Robert提供的代码中,将NodeList对象转成了数组。可以将NodeList对象转换成数组的方法:

myList = Array.prototype.slice.call (myNodeList)

这是Robert大叔的方法,有些地方还不太明白,待我研究一下再来更新好了。

/*

Developed by Robert Nyman, http://www.robertnyman.com

Code/licensing: http://code.google.com/p/getelementsbyclassname/

*/

var getElementsByClassName = function (className, tag, elm){

    if (document.getElementsByClassName) {

        getElementsByClassName = function (className, tag, elm) {

            elm = elm || document;

            var elements = elm.getElementsByClassName(className),

                nodeName = (tag)? new RegExp("\\b" + tag + "\\b", "i") : null,

                returnElements = [],

                current;

            for(var i=0, il=elements.length; i<il; i+=1){

                current = elements[i];

                if(!nodeName || nodeName.test(current.nodeName)) {

                    returnElements.push(current);

                }

            }

            return returnElements;

        };

    }

    else if (document.evaluate) {

        getElementsByClassName = function (className, tag, elm) {

            tag = tag || "*";

            elm = elm || document;

            var classes = className.split(" "),

                classesToCheck = "",

                xhtmlNamespace = "http://www.w3.org/1999/xhtml",

                namespaceResolver = (document.documentElement.namespaceURI === xhtmlNamespace)? xhtmlNamespace : null,

                returnElements = [],

                elements,

                node;

            for(var j=0, jl=classes.length; j<jl; j+=1){

                classesToCheck += "[contains(concat(' ', @class, ' '), ' " + classes[j] + " ')]";

            }

            try {

                elements = document.evaluate(".//" + tag + classesToCheck, elm, namespaceResolver, 0, null);

            }

            catch (e) {

                elements = document.evaluate(".//" + tag + classesToCheck, elm, null, 0, null);

            }

            while ((node = elements.iterateNext())) {

                returnElements.push(node);

            }

            return returnElements;

        };

    }

    else {

        getElementsByClassName = function (className, tag, elm) {

            tag = tag || "*";

            elm = elm || document;

            var classes = className.split(" "),

                classesToCheck = [],

                elements = (tag === "*" && elm.all)? elm.all : elm.getElementsByTagName(tag),

                current,

                returnElements = [],

                match;

            for(var k=0, kl=classes.length; k<kl; k+=1){

                classesToCheck.push(new RegExp("(^|\\s)" + classes[k] + "(\\s|$)"));

            }

            for(var l=0, ll=elements.length; l<ll; l+=1){

                current = elements[l];

                match = false;

                for(var m=0, ml=classesToCheck.length; m<ml; m+=1){

                    match = classesToCheck[m].test(current.className);

                    if (!match) {

                        break;

                    }

                }

                if (match) {

                    returnElements.push(current);

                }

            }

            return returnElements;

        };

    }

    return getElementsByClassName(className, tag, elm);

};
Javascript 相关文章推荐
得到文本框选中的文字,动态插入文字的js代码
Mar 07 Javascript
浅析js封装和作用域
Jul 09 Javascript
javascript检测两个数组是否相似
May 19 Javascript
javascript设计模式之对象工厂函数与构造函数详解
Jul 30 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
Apr 13 Javascript
Node.js实现文件上传
Jul 05 Javascript
JavaScript实现鼠标点击导航栏变色特效
Feb 08 Javascript
React组件refs的使用详解
Feb 09 Javascript
JavaScript实现点击出现图片并统计点击次数功能示例
Jul 23 Javascript
基于vue中对鼠标划过事件的处理方式详解
Aug 22 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
Nov 04 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
Nov 07 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
Mar 03 #Javascript
浅谈JavaScript数据类型
Mar 03 #Javascript
JavaScript中property和attribute的区别详细介绍
Mar 03 #Javascript
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
Mar 02 #Javascript
JS上传图片前实现图片预览效果的方法
Mar 02 #Javascript
JS控制弹出新页面窗口位置和大小的方法
Mar 02 #Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
Mar 02 #Javascript
You might like
thinkPHP5实现的查询数据库并返回json数据实例
2017/10/23 PHP
Dojo之路:如何利用Dojo实现Drag and Drop效果
2007/04/10 Javascript
jquery常用技巧及常用方法列表集合
2011/04/06 Javascript
js控制frameSet示例
2013/09/10 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
2013/10/30 Javascript
JQuery对表单元素的基本操作使用总结
2014/07/18 Javascript
jQuery实现长按按钮触发事件的方法
2015/02/02 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
2015/06/19 Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
2016/07/25 Javascript
js拖拽功能实现代码解析
2016/11/28 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
2017/02/09 Javascript
解析Vue2.0双向绑定实现原理
2017/02/23 Javascript
干货!教大家如何选择Vue和React
2017/03/13 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
2017/03/24 Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
2018/03/23 Javascript
vue异步加载高德地图的实现
2018/06/19 Javascript
Nodejs Express 通过log4js写日志到Logstash(ELK)
2018/08/30 NodeJs
解决Layui中templet中a的onclick参数传递的问题
2019/09/20 Javascript
JS实现滑动拼图验证功能完整示例
2020/03/29 Javascript
使用Python抓取模板之家的CSS模板
2015/03/16 Python
Python3中函数参数传递方式实例详解
2019/05/05 Python
Django框架中间件(Middleware)用法实例分析
2019/05/24 Python
Django网络框架之创建虚拟开发环境操作示例
2019/06/06 Python
python命令行参数用法实例分析
2019/06/25 Python
python requests使用socks5的例子
2019/07/25 Python
python实现word文档批量转成自定义格式的excel文档的思路及实例代码
2020/02/21 Python
Python实现查找数据库最接近的数据
2020/06/08 Python
KIKO MILANO英国官网:意大利知名化妆品和护肤品品牌
2017/09/25 全球购物
西安众合通用.net笔试题
2013/03/18 面试题
行政人员工作职责
2013/12/05 职场文书
小学生元旦感言
2014/02/26 职场文书
工作会议通知
2015/04/15 职场文书
公安忠诚教育心得体会
2016/01/23 职场文书
python爬虫selenium模块详解
2021/03/30 Python
Python语言规范之Pylint的详细用法
2021/06/24 Python
分享MySQL常用 内核 Debug 几种常见方法
2022/03/17 MySQL