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 相关文章推荐
写的htc的数据表格
Jan 20 Javascript
javascript 读取图片文件的大小
Jun 25 Javascript
javascript利用apply和arguments复用方法
Nov 25 Javascript
JS 操作Array数组的方法及属性实例解析
Jan 08 Javascript
JavaScript之Object类型介绍
Apr 01 Javascript
AngularJS中处理多个promise的方式
Feb 02 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
Nov 01 Javascript
JS实现的加减乘除四则运算计算器示例
Aug 09 Javascript
微信小程序template模版的使用方法
Apr 13 Javascript
深入理解JS异步编程-Promise
Jun 03 Javascript
node中使用log4js4.x版本记录日志的方法
Aug 20 Javascript
Vue设置长时间未操作登录自动到期返回登录页
Jan 22 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生成txt文件标题及内容的方法
2014/01/16 PHP
php实现的返回数据格式化类实例
2014/09/22 PHP
PHP严重致命错误处理:php Fatal error: Cannot redeclare class or function
2017/02/05 PHP
PHP编程实现的TCP服务端和客户端功能示例
2018/04/13 PHP
php正确输出json数据的实例讲解
2018/08/21 PHP
PHP与Perl之间知识点区别整理
2019/03/19 PHP
Dojo 学习笔记入门篇 First Dojo Example
2009/11/15 Javascript
js限制文本框为整数和货币的函数代码
2010/10/13 Javascript
高亮显示web页表格行的javascript代码
2010/11/19 Javascript
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
2013/01/29 Javascript
JQuery实现绚丽的横向下拉菜单
2013/12/19 Javascript
JS实现div居中示例
2014/04/17 Javascript
JavaScript中的toUTCString()方法使用详解
2015/06/12 Javascript
浅析在javascript中创建对象的各种模式
2016/05/06 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
2016/06/01 Javascript
iview实现select tree树形下拉框的示例代码
2018/12/21 Javascript
简单说说如何使用vue-router插件的方法
2019/04/08 Javascript
实现高性能javascript的注意事项
2019/05/27 Javascript
浅谈vue项目用到的mock数据接口的两种方式
2019/10/09 Javascript
JS中箭头函数与this的写法和理解
2021/01/14 Javascript
wxPython学习之主框架实例
2014/09/28 Python
python遍历 truple list dictionary的几种方法总结
2016/09/11 Python
pyspark.sql.DataFrame与pandas.DataFrame之间的相互转换实例
2018/08/02 Python
python实现抠图给证件照换背景源码
2019/08/20 Python
python 统计文件中的字符串数目示例
2019/12/24 Python
python爬虫scrapy基于CrawlSpider类的全站数据爬取示例解析
2021/02/20 Python
HTML5中drawImage用法分析
2014/12/01 HTML / CSS
html5的pushstate以及监听浏览器返回事件的实现
2020/08/11 HTML / CSS
巴西男士胡须和头发护理产品商店:Beard
2017/11/13 全球购物
全世界最美丽的四星和五星级酒店预订:Prestigia.com
2017/11/15 全球购物
捷克多品牌在线时尚商店:ANSWEAR.cz
2020/10/03 全球购物
美国工业用品采购网站:Zoro.com
2020/10/27 全球购物
坚定理想信念心得体会
2014/03/11 职场文书
科研课题实施方案
2014/03/18 职场文书
机关党建工作汇报材料
2014/08/20 职场文书
常务副总经理岗位职责
2015/02/02 职场文书