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


Posted in Javascript onNovember 25, 2016

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"

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;
		 }

代码二、

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"

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' />
  <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>

效果如图所示:

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

Javascript 相关文章推荐
加速IE的Javascript document输出的方法
Dec 02 Javascript
javascript 保存文件到本地实现方法
Nov 29 Javascript
jQuery的animate函数实现图文切换动画效果
May 03 Javascript
js图片卷帘门导航菜单特效代码分享
Sep 10 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
Dec 04 Javascript
JavaScript基础知识及常用方法总结
Jan 10 Javascript
全面理解JavaScript中的继承(必看)
Jun 16 Javascript
Javascript 获取鼠标当前的位置实现方法
Oct 27 Javascript
vue动态设置img的src路径实例
Sep 18 Javascript
4个顶级JavaScript高级文本编辑器
Oct 10 Javascript
基于纯JS实现多张图片的懒加载Lazy过程解析
Oct 14 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
Apr 22 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
Nov 25 #Javascript
JS实现的图片预览插件与用法示例【不上传图片】
Nov 25 #Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
Nov 25 #Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
Nov 25 #Javascript
bootstrap-datetimepicker实现只显示到日期的方法
Nov 25 #Javascript
利用angular.copy取消变量的双向绑定与解析
Nov 25 #Javascript
JS冒泡事件与事件捕获实例详解
Nov 25 #Javascript
You might like
php+mysql查询优化简单实例
2015/01/13 PHP
PHP获取文件夹大小函数用法实例
2015/07/01 PHP
PHP定时任务获取微信access_token的方法
2016/10/10 PHP
thinkPHP中session()方法用法详解
2016/12/08 PHP
PHP+AjaxForm异步带进度条上传文件实例代码
2017/08/14 PHP
在父页面调用子页面的JS方法
2013/09/29 Javascript
Javascript数据结构与算法之列表详解
2015/03/12 Javascript
jQuery使用$.ajax进行即时验证的方法
2015/12/08 Javascript
jQuery简单操作cookie的插件实例
2016/01/13 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
2016/12/07 Javascript
详解原生js实现offset方法
2017/06/15 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
2017/08/28 Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
2018/07/26 Javascript
让axios发送表单请求形式的键值对post数据的实例
2018/08/11 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
2018/08/27 Javascript
Jquery实现获取子元素的方法分析
2019/08/24 jQuery
vue中touch和click共存的解决方式
2020/07/28 Javascript
一起来了解一下JavaScript的预编译(小结)
2021/03/01 Javascript
[01:06:07]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS CIS
2014/05/22 DOTA
[40:05]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第一局
2016/02/25 DOTA
[37:47]IG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python解析文件示例
2014/01/23 Python
Python实现LRU算法的2种方法
2015/06/24 Python
Python缩进和冒号详解
2016/06/01 Python
python多线程下信号处理程序示例
2019/05/31 Python
什么是Connection-oriented Protocol/Connectionless Protocol面向连接的协议/无连接协议
2012/09/06 面试题
面试后的英文感谢信
2014/02/01 职场文书
2014年五一促销活动方案
2014/03/09 职场文书
篝火晚会主持词
2014/03/25 职场文书
人事任命书范文
2014/06/04 职场文书
关于感恩的演讲稿200字
2014/08/26 职场文书
教师批评与自我批评范文
2014/10/15 职场文书
2015学校年度工作总结
2015/05/11 职场文书
家庭教育教师培训学习体会
2016/01/14 职场文书
mysql外连接与内连接查询的不同之处
2021/06/03 MySQL
手把手带你彻底卸载MySQL数据库
2022/06/14 MySQL