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 相关文章推荐
页面中body onload 和 window.onload 冲突的问题的解决
Jul 01 Javascript
javascript 拖放效果实现代码
Jan 22 Javascript
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
May 18 Javascript
jquery插件制作 表单验证实现代码
Aug 17 Javascript
jQuery(js)获取文字宽度(显示长度)示例代码
Dec 31 Javascript
javascript if条件判断方法小结
May 17 Javascript
JavaScript 异常处理 详解
Feb 06 Javascript
深入浅析同源策略和跨域访问
Nov 26 Javascript
js微信分享API
Oct 11 Javascript
javascript内存分配原理实例分析
Apr 10 Javascript
微信小程序之滚动视图容器的实现方法
Sep 26 Javascript
webpack 开发和生产并行设置的方法
Nov 08 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
php不用正则采集速度探究总结
2008/03/24 PHP
php中用于检测一个地理IP地址是否可用的代码
2012/02/19 PHP
解析PHP高效率写法(详解原因)
2013/06/20 PHP
php实现文件下载(支持中文文名)
2013/12/04 PHP
PHP中mysql_field_type()函数用法
2014/11/24 PHP
PHP实现浏览器中直接输出图片的方法示例
2018/03/14 PHP
JS 判断undefined的实现代码
2009/11/26 Javascript
jQuery 操作下拉列表框实现代码
2010/02/22 Javascript
Javascript基础教程之数据类型转换
2015/01/18 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
2016/05/20 Javascript
JS实现的DOM插入节点操作示例
2018/04/04 Javascript
vue.js实现的绑定class操作示例
2018/07/06 Javascript
vue移动端监听滚动条高度的实现方法
2018/09/03 Javascript
python处理文本文件并生成指定格式的文件
2014/07/31 Python
python提取页面内url列表的方法
2015/05/25 Python
深入分析python中整型不会溢出问题
2018/06/18 Python
使用TensorFlow实现SVM
2018/09/06 Python
python 随机森林算法及其优化详解
2019/07/11 Python
python3.6中@property装饰器的使用方法示例
2019/08/17 Python
django xadmin中form_layout添加字段显示方式
2020/03/30 Python
python如何运行js语句
2020/09/09 Python
python3中数组逆序输出方法
2020/12/01 Python
pycharm 实现调试窗口恢复
2021/02/05 Python
python实现不同数据库间数据同步功能
2021/02/25 Python
CSS3 @keyframes简单动画实现
2018/02/24 HTML / CSS
英国工艺品购物网站:Minerva Crafts
2018/01/29 全球购物
英国当代时尚和街头服饰店:18montrose
2018/12/15 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?用contains来区分是否有重复的对象。还是都不用
2013/07/30 面试题
实习单位推荐信范文
2013/11/27 职场文书
管理心得体会
2013/12/28 职场文书
工业设计专业个人求职信范文
2013/12/28 职场文书
小学生检讨书大全
2014/02/06 职场文书
美丽乡村建设实施方案
2014/03/23 职场文书
2014最新开业庆典策划方案(5篇)
2014/09/15 职场文书
2015年安康杯竞赛活动总结
2015/03/26 职场文书
python入门之算法学习
2021/04/22 Python