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 showModalDialog模态对话框使用说明
Dec 31 Javascript
chrome原生方法之数组
Nov 30 Javascript
jquery固定底网站底部菜单效果
Aug 13 Javascript
JavaScript函数参数使用带参数名的方式赋值传入的方法
Mar 19 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
Oct 29 Javascript
JQuery插件Marquee.js实现无缝滚动效果
Apr 26 Javascript
BootStrap智能表单实战系列(七)验证的支持
Jun 13 Javascript
最全的JavaScript开发工具列表 总有一款适合你
Jun 29 Javascript
详解vue+css3做交互特效的方法
Nov 20 Javascript
JS实现标签滚动切换效果
Dec 25 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
Nov 13 Javascript
JavaScript交换两个变量方法实例
Nov 25 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安装全攻略:APACHE
2006/10/09 PHP
动态生成gif格式的图像要注意?
2006/10/09 PHP
PHP服务器页面间跳转实现方法
2012/08/02 PHP
Yii2针对游客、用户防范规则和限制的解决方法分析
2016/10/08 PHP
php 函数使用可变数量的参数方法
2017/05/02 PHP
php封装的mongodb操作类代码
2017/08/06 PHP
php提供实现反射的方法和实例代码
2019/09/17 PHP
PHP7 list() 函数修改
2021/03/09 PHP
jQuery.buildFragment使用方法及思路分析
2013/01/07 Javascript
jquery UI Datepicker时间控件的使用及问题解决
2016/04/28 Javascript
Javascript typeof与instanceof的区别
2016/10/18 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
2016/12/15 Javascript
nodejs搭建本地服务器并访问文件的方法
2017/03/03 NodeJs
文本溢出插件jquery.dotdotdot.js使用方法详解
2017/06/22 jQuery
vue2.0项目实现路由跳转的方法详解
2018/06/21 Javascript
vue项目打包上传github并制作预览链接(pages)
2019/04/19 Javascript
简单了解JavaScript sort方法
2019/11/25 Javascript
Python 常用 PEP8 编码规范详解
2017/01/22 Python
python获取交互式ssh shell的方法
2019/02/14 Python
Python学习笔记之Django创建第一个数据库模型的方法
2019/08/07 Python
Python (Win)readline和tab补全的安装方法
2019/08/27 Python
使用python 计算百分位数实现数据分箱代码
2020/03/03 Python
Python生成器常见问题及解决方案
2020/03/21 Python
python爬虫请求头的使用
2020/12/01 Python
CSS3实现简易版的刮刮乐效果
2016/09/27 HTML / CSS
一款纯css3实现的鼠标悬停动画按钮
2014/12/29 HTML / CSS
CSS3 display知识详解
2015/11/25 HTML / CSS
Napapijri西班牙在线商店:夹克、外套、运动衫等
2020/11/05 全球购物
什么是Rollback Segment
2013/04/22 面试题
2014年个人工作总结范文
2014/11/07 职场文书
自我评价优缺点范文
2015/03/11 职场文书
2015元旦感言
2015/12/09 职场文书
导游词之新疆-喀纳斯
2019/10/10 职场文书
关于食品安全的演讲稿范文(三篇)
2019/10/21 职场文书
Nginx+Tomcat负载均衡集群的实现示例
2021/10/24 Servers
idea下配置tomcat避坑详解
2022/04/12 Servers