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 相关文章推荐
JS 学习笔记 防止发生命名冲突
Jul 30 Javascript
js操作checkbox遇到的问题解决
Jun 29 Javascript
Javascript实现多彩雪花从天降散落效果的方法
Feb 02 Javascript
JavaScript获取网页表单action属性的方法
Apr 02 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
Jun 02 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
Oct 09 Javascript
Json按某个键的值进行排序
Dec 22 Javascript
bootstrapValidator.min.js表单验证插件
Feb 09 Javascript
JS 实现微信扫一扫功能
Sep 14 Javascript
vue.js指令v-for使用以及下标索引的获取
Jan 31 Javascript
vue设计一个倒计时秒杀的组件详解
Apr 06 Javascript
vue data恢复初始化数据的实现方法
Oct 31 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
星际争霸, 教主第一视角, ZvT经典龙蛇演义
2020/03/02 星际争霸
5.PHP的其他功能
2006/10/09 PHP
PHP转换文件夹下所有文件编码的实现代码
2013/06/06 PHP
探讨GDFONTPATH能否被winxp下的php支持
2013/06/21 PHP
PHP简单检测网址是否能够正常打开的方法
2016/09/04 PHP
PHP后期静态绑定实例浅析
2018/12/21 PHP
JS高级笔记
2011/07/13 Javascript
js实现两个值相加alert出来精确到指定位
2013/09/25 Javascript
基于jquery插件实现常见的幻灯片效果
2013/11/01 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
2013/11/18 Javascript
利用jquery写的左右轮播图特效
2014/02/12 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
2016/08/10 Javascript
js入门之Function函数的使用方法【新手必看】
2016/11/22 Javascript
javascript深拷贝的原理与实现方法分析
2017/04/10 Javascript
深入理解vue中的$set
2017/06/01 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
2017/10/23 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
2017/10/25 Javascript
vue引入ueditor及node后台配置详解
2018/01/03 Javascript
vue 动态给每个页面添加title、关键词和描述的方法
2020/08/28 Javascript
Python标准库之sqlite3使用实例
2014/11/25 Python
Python多线程实现同步的四种方式
2017/05/02 Python
python中的set实现不重复的排序原理
2018/01/24 Python
使用Flask集成bootstrap的方法
2018/07/24 Python
对python 自定义协议的方法详解
2019/02/13 Python
Python列表(list)所有元素的同一操作解析
2019/08/01 Python
PyQt5.6+pycharm配置以及pyinstaller生成exe(小白教程)
2020/06/02 Python
常用的10个Python实用小技巧
2020/08/10 Python
python 匿名函数与三元运算学习笔记
2020/10/23 Python
巴西在线鞋店:Shoestock
2017/10/28 全球购物
运动会跳远加油稿
2014/02/20 职场文书
经济管理毕业生求职信
2014/03/15 职场文书
农村产权制度改革实施方案
2014/03/21 职场文书
办公室主任个人总结
2015/02/28 职场文书
大学生创业计划书
2019/06/24 职场文书
基于CSS3画一个iPhone
2021/04/21 HTML / CSS
PyTorch梯度裁剪避免训练loss nan的操作
2021/05/24 Python