威尼斯人线上娱乐

率先节课程

24 8月 , 2019  

getElementsByClassName()是HTML5 新添的DOM API。IE8以下不帮衬寻觅。

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

 那篇文章首要介绍了JavaScript跨浏览器获取页面中同样class节点的主意,本文解说使用getELementsByClassName函数消除这一个必要,并给了贰个开源的getELementsByClassName函数达成,成效进一步强劲,需求的对象能够参见下

 

 

网页开采时,在十分多时候大家要求操作同样类名的因素,即class一样的因素。前几日在座笔试,有一道相关的标题没答上来:

JavaScript得到页面中class为test的节点

于是乎搜罗了有的辅车相依的资料,在本文中列举了二种本身认为相比较好的法子,不足之处,还望大家斟酌指正。假诺大家有越来越好的办法,希望得以享用。

Solution1 Jeremy Keuth方案

杰里米 Keuth公公在《JavaScript DOM 编制程序艺术》(第2版)(匈牙利(Magyarország)语:DOM
Scripting-Web Design with JavaScript and the Document Object
Model)一书的第三章第4节中讲到了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成分的章程还有许多,但的确高效的却相当的少,JeremyKeuth大爷的措施有二个败笔就是无法用于五个类名,2010年,罗BertNyman在小说 The Ultimate GetElementsByClassName, Anno
2010中提供了上下一心的建设方案。在二〇〇七年,罗Bert三伯就曾经付出了和谐的getElementsByClassName的函数,在2009年的时候,修改了有些代码,增添了重重新的职能:

1.倘若当前浏览器扶助getElementsByClassName函数,则调用该原生函数;
2.万一当前浏览器协理则运用XPath;//小飞鱼:一种浏览器内置的一定XML文书档案的强硬格局,可是浏览器支持地方不联合
3.帮助多少个类名的物色,不计前后相继顺序;
4.回去真正的节点数组,实际不是原生的四个nodelist。//小飞鱼:原生的getElementsByClassName方法重临的是一个NodeList对象,它很像数组,有length和数字索引属性,但并非数组,不能够用pop,push等数组有意的点子,罗Bert提供的代码中,将NodeList对象转成了数组。可以将NodeList对象转变来数组的主意:

代码如下:

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

 

这是罗Bert四伯的方法,有个别地点还不太驾驭,待笔者研讨一下再来更新好了。

 

代码如下:

/*
Developed by Robert Nyman,
Code/licensing:
*/
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 = “”,
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跨浏览器获取页面中同样class节点的措施,本文讲明使用getELem…

网页开荒时,在好些个时候大家必要操作一样类名的成分,即class同样的因素。明天列席笔试,有一道相关的标题没答上来:

一、JavaScript(JS)定义:

  • JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的言语。
  • JavaScript日常用来操作HTML页面,响应顾客操作,验证传输数据等。

  • jQuery和JavaScript有啥样关系?jQuery是由JS编写的三个js库。

组成:

ECMAScript,描述了该语言的语法和着力对象。

文书档案对象模型(DOM),描述管理网页内容的方法和接口。

浏览器对象模型(BOM),描述与浏览器进行彼此的方法和接口。 

 

 威尼斯人线上娱乐 1

 

getElementByClassName()函数的采取方式:

有关作品

连带寻找:

前些天看什么

搜索才能库

归来首页

  • 隐性调用php程序的法门
  • 浅谈JavaScript中的Math.atan()方法的选拔
  • JavaScript中反正弦函数Math.asin()的利用简单介绍
  • JavaScript中的acos()方法应用详解
  • 介绍JavaScript中Math.abs()方法的采用
  • JavaScript中Math.SQRT2属性的应用详解

连锁频道:
HTML/CSS  HTML5  Javascript  jQuery  AJax教程  前端代码  正则表明式  Flex教程  WEB前端教程  

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

二、JS代码写在哪个地方?

1 JavaScript代码能够写在页面包车型地铁

  • 内嵌 js,
  • 外链 js文件之中,利用src属性引进
  • 标签属性之中(不引入);

    1. script标签中的属性type="text/javascript"或language=”javascript”,HTML5新准绳下得以怎么都不要加;

    2. script标签能够放置于任何职责,分化的职位要小心加载顺序,经常位于head或body停止以前;

选取JavaScript访谈DOM的叁个要害主题材料是,此进度供给一种通过成分类名称来抉择类的类函数,对DOMContentReady,那体系函数的相当不够导致开垦人士要求本人编排自定义脚本业施行上述职责,多数这一个类脚本都以环绕着getElementByClassName()创立的,这种消除办法在HTML第55中学被标准,别的,这种办法还本地存在于当代浏览器中,GetElementByClassName()只利用七个字符串值作为输入.并赶回一个Nodelist,那些NodeList富含所有类名称相配那几个字符串值的元素:

帮客商讨

于是乎搜罗了一部分连锁的素材,在本文中历数了三种自作者觉着相比好的秘技,不足之处,还望大家切磋指正。尽管大家有越来越好的措施,希望得以享用。

三、 写JS代码要求留心什么

style=”font-family: 行草; font-size: 16px”>1、严苛区分轻重缓急写;

style=”font-family: 楷书; font-size: 16px”>2、语句字符都以半角字符;(字符串里面能够使率性字符);

style=”font-family: 甲骨文; font-size: 16px”>3、有些完整语句后边要写分号
(;);

style=”font-family: 黑体; font-size: 16px”>4、代码要缩进,缩进要对齐;

var el =
document.getElementsByClassName(‘foo’);

Solution1 Jeremy Keuth方案

四、 JS调试

1、alert(“字符串”);

2、console.log();

3、document.write();
//括号中的内容会被深入分析HTML ;注意:当文书档案流加载成功后使用,内容会覆盖任何文书档案;

通过在字符串中运用空格分隔类,也能够相配四个类,下边包车型客车代码挑选出了装有既具有foo类名称又具有bar类名称的成分:

杰里米 Keuth公公在《JavaScript DOM 编制程序艺术》(第2版)(土耳其(Turkey)语:DOM
Scripting-Web Design with JavaScript and the Document Object
Model)一书的第三章首节中讲到了getElementsByClass这些艺术,并讲到了怎么样在不帮忙该属性的浏览器(IE6,IE7和IE8,让我们鄙视他们)中使用这一措施,摘录在此,个别地点有改变。

五、变量

当大家重复使用某些成分或然有个别数据时,内容恐怕太长只怕数额要扩充退换,那时就必要定义变量来替代它们。

  语法:`var` + `变量名`

      • var 声明
      • 变量命名准绳:

  可以采取`$` , `_` ,`字母`,
`数字`威尼斯人线上娱乐 ,,[ 无法以数字开首 ] ,[字母严刻区别轻重缓急写],
[见名知意]

        1.var abc; //申明不赋值
        2.var obj = 123;//申明立即赋值

  二个var可以注脚七个变量,变量不自然要及时赋值

        1. var a,b,c,d;//一次声明多个变量
        2. var a = 1,b = 2, c = 3,d = 4;//一次声明多个申明即赋值的变量

var el =
document.getElementsByClassName(‘foo bar’);

HTML5
DOM中新添了多少个办法让我们经过class属性中的类名来访谈成分,那便是:getELementsByClassName,由于措施比较新,某个的DOM落成里还平昔不,因而在使用的时候要小心。下边大家先来看一看那些法子能帮大家做哪些,然后在座谈怎么可信的利用该格局。
与getELementsByTagName方法类似,getElementsByClassName也只接受一个参数,正是类名:

六 、Js中的注释

  • 单行 //
  • 多行 /* */

W3C未有getElementByClassName那些函数,我们得以友善定义一个函数来模拟它。

复制代码 代码如下:

七、获取成分

  1. 收获成分 

非同小可的价签 

  • document.body
  • document.head
  • document.title

一般标签 

  • document.getElementById() 匹配ID名称…
  • ele.getElementsByTagName() 相配标具名是…的集聚动态方法 
           //类数组  多个

    • ele.getElementsByTagName("*")    通配符使用;
  • document.getElementsByName() 匹配name是…的集合 动态方法 
          //类数组  多个       
  • ele.getElementsByClassName() 匹配class名称…的集合 动态方法 
            //类数组  多个
  • ele.querySelector(); 相称css采纳器的第多少个
  • ele.querySelectorAll(); 相称css选取器相称的保有集合  
      //类数组  多个
    . 及[]的运用

例子:

  • getElementById和getElementByTagName结合使用。

      • var obj=document.getElementById(‘main’);

      • var o =
        obj.getElementsByTagName(“*”);

      • alert(o.length);

  • 找出有八个类名的节点

      • //查找同期含有类名“tag”和“header”的节点,将类名用空格隔开分离,与各类无关

      • var objs = document.getElementsByClassName("tag header");

      • “console.log(“类名称叫header的要素的个数为:”+objs.length);

  • getElementById和getElementsByClassName

        • var obj =
          document.getElementById(“container”);
        • var objs = obj.getElementsByClassName(“header”);
        • console.log(“id为container的div中类名字为header的节点的个数为:”+objs.length); 
  • querySelector()的施用(相配css选拔器的第三个)

        • var obj=document.querySelector(‘#container #main ul
          li’);
        • alert(obj.textContent);====>“getElementById111”     
  • ele.querySelectorAll()的使用(匹配css选择器匹配的所有集合--多个)

        • var
          obj=document.querySelectorAll(‘#container #main ul
          li’);

        • alert(obj.length);====>3

        • for
          (var i = 0; i < obj.length; i++) {
        • console.log(obj[i]);====>getElementById111,getElementsByClassName222,getElementsByTagName333
        • }   

诚如如下两种方式:

getElementsByClassName(class)

八、获取和改产生分HTML

  • 元素HTML内容 
    ele.innerHTML 获取成分HTML 
    ele.innerHTML = ‘字符串’; 修改成分HTML

    • 套路:“用于修改成分的HTML内容(innerHTML)的JS代码,被修改成分必需在JS代码在此以前”;
  • 要素文本内容 
    标准 
    ele.textContent 获取成分文本 
    ele.textContent =
    ‘字符串’; 修改成分文本 
    非标准(ie低版本) 
    ele.innerText 获取成分文本 
    ele.innerText =
    ‘字符串’; 修改成分文本

1、要不正是使用jquery来完结

以此办法的重临值也与getElementsByTagName类似,都以二个享有同样类名的因素的数组,上面那行代码重临的便是一个数组,在那之中蕴涵类名叫“sale”的富有因素:

九、HTML代码

2、通过自定义函数消除

复制代码 代码如下:

威尼斯人线上娱乐 2

class单个时 如class=”test”

document.getElementsByClassName(“sale”)

function getElementsByClassName (className) {
    var all = document.all ? document.all : document.getElementsByTagName('*');
    var elements = new Array();
    for (var e = 0; e < all.length; e++) {
   if (all[e].className == className) {
    elements[elements.length] = all[e];
    break;
   }
    }
    return elements;
   }

行使这一个艺术还是可以找出那个满含八个类名的因素。要钦赐八个类名,只要在字符串参数中用空格分隔类名就能够。比方,在<script>标签中增加上面那行代码:

代码二、

复制代码 代码如下:

function getElementsByClassName(className,parent){
        var oParent=parent?document.getElementById("parent"):document;
        var oLis=oParent.getElementsByTagName("*");
        var arr=[];
        for(var i=0;i<oLis.length;i++){
          if(oLis[i].className==className){
            arr.push(oLis[i])
          };
          return arr;
        }
      };

alert(document.getElementsByClassName(“sale important”).length);

class有四个的时候同样分外,如class=”test1 test2 test3″

全部代码

function getElementsByClassName (className) {
    var all = document.all ? document.all : document.getElementsByTagName('*');
    var elements = new Array();
    for (var e = 0; e < all.length; e++) {
    var classList = all[e].className.split(" ");
    for(var i=0;i<classList.length;i++){
     if (classList[i] == className) {
     elements[elements.length] = all[e];
      break;
     }
    }
    }
    return elements;
   }

复制代码 代码如下:

上面再附叁个完全的测量检验代码:

<!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>

<!DOCTYPE html>
<html>
<head>
  <meta charset='UTF-8' />
  <script>
    /*JS写getElementByClassName;
    我发现chorm、firefox、ie都支持document.getElementsByClassName */
      window.onload = function(){
        var adom = document.getElementsByClassName('a1');
        for(var i = 0;i<adom.length;i++)
          adom[i].style.backgroundColor="red";
      };
      function getElementByClassName(className){
        var elems = [];
        if(!document.getElementsByClassName){
          alert("no exit");
          var dom = document.getElementByTagName('*');
          for(var i = 0;i<dom.length;i++){
            if(dom[i].className == className)
              elems.push(dom[i]);
          }
        }else{
          elems = document.getElementsByClassName(className);
          alert('exit');
        }
        return elems;
      }
  </script>
</head>

<body>
  <div id="a1">a1</div>
  <div class="a1">a1</div>
  <div class="a1">a1</div>
  <div id="a1">a1</div>
  <div class="a1">a1</div>
</body>

</html>

你拜谒到警告框中展现1,表示唯有三个要素相称,因为唯有二个成分同时蕴含”important”和”sale”类名。注意,尽管在要素的class属性中,类名的依次是”sale
important”而非参数中钦定的”important
sale”,也会照旧相称该因素。不止类名的其实顺序不重大,固然成分还含有更加多类名也绝非涉及。与使用getELementsByTagName同样,也足以组合使用getElementsByClassName和getElementById。假如您想精晓在id为purchase的因素中有个别许类名包涵test的列表项,能够先找到十三分特定的靶子,然后再调用getElementsByClassName:

效能如图所示:

复制代码 代码如下:

威尼斯人线上娱乐 3

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树中的搜索源点,第1个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元素的措施还会有许多,但的确高效的实际不是常少,JeremyKeuth四伯的不二法门有叁个瑕玷便是不可能用来三个类名,二零零六年,RobertNyman在小说 The Ultimate GetElementsByClassName, Anno
2009中提供了谐和的实施方案。在二〇〇六年,罗Bert大爷就已经付出了和煦的getElementsByClassName的函数,在二零零六年的时候,修改了有些代码,加多了多数新的效劳:

1.比如当前浏览器补助getElementsByClassName函数,则调用该原生函数;
2.纵然当前浏览器扶助则运用X帕特h;//小飞鱼:一种浏览器内置的恒久XML文书档案的兵不血刃方式,可是浏览器协助方面不联合
3.支撑多个类名的搜索,不计前后相继顺序;
4.回来真正的节点数组,并不是原生的三个nodelist。//小飞鱼:原生的getElementsByClassName方法重临的是三个NodeList对象,它很像数组,有length和数字索引属性,但并非数组,不可能用pop,push等数组有意的主意,罗Bert提供的代码中,将NodeList对象转成了数组。能够将NodeList对象转变到数组的章程:

复制代码 代码如下:

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

那是罗Bert小叔的法子,有个别地点还不太明白,待笔者商量一下再来更新好了。

复制代码 代码如下:

/*
Developed by Robert Nyman,
Code/licensing:
*/
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 = “”,
                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达成跨浏览器的增加及删除事件绑定函数实例
  • javascript跨浏览器的性质判定格局
  • my伊夫nt.js
    javascript跨浏览器事件框架
  • 跨浏览器通用、可选拔的选项卡tab切换js代码
  • JavaScript判定窗口是不是最小化的代码(跨浏览器)
  • 依附JS火速达成导航下拉菜单动画效果附源码下载
  • js完成加载更多职能实例
  • js
    达成部分跨浏览器的平地风波措施详解及实例


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图