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 相关文章推荐
JavaScript的parseInt 进制问题
May 07 Javascript
jquery select(列表)的操作(取值/赋值)
Aug 06 Javascript
jquery多选项卡效果实例代码(附效果图)
Mar 23 Javascript
浅析JavaScript中的隐式类型转换
Dec 05 Javascript
jquery防止重复执行动画避免页面混乱
Apr 22 Javascript
from表单多个按钮提交用onclick跳转不同action
Apr 24 Javascript
javascript性能优化之事件委托实例详解
Dec 12 Javascript
实例解析jQuery中proxy()函数的用法
May 24 Javascript
js闭包学习心得总结
Apr 17 Javascript
浅谈一种让小程序支持JSX语法的新思路
Jun 16 Javascript
es6中比较有用的7个技巧小结
Jul 12 Javascript
小程序选项卡以及swiper套用(跨页面)
Jun 19 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 正则表达式小结
2009/08/31 PHP
Yii框架响应组件用法实例分析
2019/09/04 PHP
javascript简单实现图片预加载
2014/12/03 Javascript
javascript学习总结之js使用技巧
2015/09/02 Javascript
论Bootstrap3和Foundation5网格系统的异同
2016/05/16 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
2016/12/25 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
2017/03/06 Javascript
使用nodejs爬取前程无忧前端技能排行
2017/05/06 NodeJs
详解webpack解惑:require的五种用法
2017/06/09 Javascript
详谈js中标准for循环与foreach(for in)的区别
2017/11/02 Javascript
js读取本地文件的实例
2017/12/22 Javascript
微信小程序使用Promise简化回调
2018/02/06 Javascript
JS定义函数的几种常用方法小结
2019/05/23 Javascript
jQuery实现简易QQ聊天框
2020/02/10 jQuery
关于pip的安装,更新,卸载模块以及使用方法(详解)
2017/05/19 Python
Tensorflow之构建自己的图片数据集TFrecords的方法
2018/02/07 Python
python利用插值法对折线进行平滑曲线处理
2018/12/25 Python
python 求一个列表中所有元素的乘积实例
2019/06/11 Python
python将excel转换为csv的代码方法总结
2019/07/03 Python
python PyAutoGUI 模拟鼠标键盘操作和截屏功能
2019/08/04 Python
Python3.7 读取 mp3 音频文件生成波形图效果
2019/11/05 Python
python 协程 gevent原理与用法分析
2019/11/22 Python
TFRecord格式存储数据与队列读取实例
2020/01/21 Python
class类在python中获取金融数据的实例方法
2020/12/10 Python
举例讲解Python装饰器
2020/12/24 Python
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
2015/04/24 HTML / CSS
以色列的身体护理及家居香薰品牌:Sabon NYC
2018/02/23 全球购物
澳大利亚现代波西米亚风格女装网站:Bohemian Traders
2018/04/16 全球购物
什么叫做SQL注入,如何防止
2016/10/04 面试题
汽车技术服务与营销专业在籍生自荐信
2013/09/28 职场文书
爱国主义教育活动总结
2014/05/07 职场文书
美术教师个人工作总结
2015/02/06 职场文书
《最后一头战象》教学反思
2016/02/16 职场文书
《活见鬼》教学反思
2016/02/24 职场文书
JavaScript继承的三种方法实例
2021/05/12 Javascript
pytorch中的model=model.to(device)使用说明
2021/05/24 Python