js document.getElementsByClassName的使用介绍与自定义函数

简介:

今天在增加一个功能的时候需要用到getElementsByClassName(),getElementsByClassName但是HTML5 新增的DOM API。IE8以下不支持,那么就需要下面的方法解决了

getElementsByClassName()是HTML5 新增的DOM API。IE8以下不支持搜索。

getElementByClassName()函数的使用方法:

使用JavaScript访问DOM的一个重大问题是,此过程需要一种通过元素类名称来选择类的类函数,对DOMContentReady,这种类函数的缺失导致开发人员需要自己编写自定义脚本业执行上述任务,许多这个类脚本都是围绕着getElementByClassName()建立的,这种解决方法在HTML5中被标准化,另外,这种方法还本地存在于现代浏览器中,GetElementByClassName()只使用一个字符串值作为输入.并返回一个Nodelist,这个NodeList包含所有类名称匹配这个字符串值的元素:

var el = document.getElementsByClassName('foo');

通过在字符串中使用空格分隔类,也可以匹配多个类,下面的代码挑选出了所有既拥有foo类名称又拥有bar类名称的元素:

var el = document.getElementsByClassName('foo bar');

W3C没有getElementByClassName这个函数,我们可以自己定义一个函数来模拟它。

一般如下几种方法:

1、要不就是使用jquery来实现

2、通过自定义函数解决

class单个时 如class="test"

1
2
3
4
5
6
7
8
9
10
11
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;
          }

代码二、

1
2
3
4
5
6
7
8
9
10
11
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;
         }
       };

class有多个的时候同样匹配,如class="test1 test2 test3"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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;
          }

下面再附一个完整的测试代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!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>

效果如图所示:


本文转自问道博客51CTO博客,原文链接http://blog.51cto.com/450236/1908377如需转载请自行联系原作者

crackernet
相关文章
|
11月前
|
JavaScript
js中常见的内置对象(js的问题)
js中常见的内置对象(js的问题)
51 0
|
11月前
|
JavaScript 前端开发
js的一些内置函数
js的一些内置函数
46 1
|
XML JSON JavaScript
探索在 JS 中,为什么要在函数前面加
探索在 JS 中,为什么要在函数前面加
|
存储 JavaScript 前端开发
|
XML JavaScript 前端开发
【前端】JavaScript(JS)的DOM对象(JS的Document对象)----什么是DOM对象?
JavaScript(JS)的DOM对象(JS的Document对象)----什么是DOM对象? Document Object Model 文档对象模型:将标记语言文档的各个组成部分,封装为对象。可以使用这些对象,对标记语言文档进行CRUD(增删改查)的动态操作。 通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。HTML DOM 模型被构造为对象的树。 提示:Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访。
206 0
【前端】JavaScript(JS)的DOM对象(JS的Document对象)----什么是DOM对象?
|
JSON 自然语言处理 JavaScript
深入理解Js里new Function语法
深入理解Js里new Function语法
|
JavaScript 前端开发
Javascript知识【JS-Math对象&JS-DOM对象】
介绍了:JS-Math对象和JS-DOM对象的使用以及操作案例
Javascript知识【JS-Math对象&JS-DOM对象】
|
JavaScript 前端开发
JavaScript 技术篇-js获取document的几种方式,js获取dom元素的常用方法。
JavaScript 技术篇-js获取document的几种方式,js获取dom元素的常用方法。
778 0
JavaScript 技术篇-js获取document的几种方式,js获取dom元素的常用方法。
|
JSON JavaScript 测试技术

相关实验场景

更多