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 关键词高亮(根据ID/tag高亮关键字)案例介绍
Jan 21 Javascript
jquery获取选中的文本和值的方法
Jul 08 Javascript
javascript实现页面刷新时自动清空表单并选中的方法
Jul 18 Javascript
url中的特殊符号有什么含义(推荐)
Jun 17 Javascript
浅析jQuery Ajax通用js封装
Jun 22 Javascript
js实现可输入可选择的select下拉框
Dec 21 Javascript
微信小程序-滚动消息通知的实例代码
Aug 03 Javascript
详解基于mpvue的小程序markdown适配解决方案
May 08 Javascript
微信小程序动画(Animation)的实现及执行步骤
Oct 28 Javascript
Vue中qs插件的使用详解
Feb 07 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
Aug 19 Javascript
Canvas跟随鼠标炫彩小球的实现
Apr 11 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
Zerg建筑一览
2020/03/14 星际争霸
php输出表格的实现代码(修正版)
2010/12/29 PHP
PHP生成条形码大揭秘
2015/09/24 PHP
学习php设计模式 php实现策略模式(strategy)
2015/12/07 PHP
php中简单的对称加密算法实现
2017/01/05 PHP
ExtJs中简单的登录界面制作方法
2010/08/19 Javascript
EasyUI在表单提交之前进行验证的实例代码
2016/06/24 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
2016/12/14 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
JS使用cookie实现只出现一次的广告代码效果
2017/04/22 Javascript
微信小程序与php 实现微信支付的简单实例
2017/06/23 Javascript
Echarts之悬浮框中的数据排序问题
2018/11/08 Javascript
利用React高阶组件实现一个面包屑导航的示例
2020/08/23 Javascript
Vue3为什么这么快
2020/09/23 Javascript
[07:27]DOTA2卡尔工作室 英雄介绍水晶室女篇
2013/06/21 DOTA
python使用webbrowser浏览指定url的方法
2015/04/04 Python
Python with用法实例
2015/04/14 Python
使用python实现knn算法
2017/12/20 Python
详解Python 实现元胞自动机中的生命游戏(Game of life)
2018/01/27 Python
caffe binaryproto 与 npy相互转换的实例讲解
2018/07/09 Python
win8下python3.4安装和环境配置图文教程
2018/07/31 Python
python直接获取API传递回来的参数方法
2018/12/17 Python
python+selenium 定位到元素,无法点击的解决方法
2019/01/30 Python
详解Python做一个名片管理系统
2019/03/14 Python
Giglio德国网上精品店:奢侈品服装和配件
2016/09/23 全球购物
美国和加拿大房车出售在线分类广告:RVT.com
2018/04/23 全球购物
乌克兰数字设备、配件和智能技术的连锁商店:KTC
2020/08/18 全球购物
大学教师师德师风演讲稿
2014/08/22 职场文书
旅游项目合作意向书
2015/05/08 职场文书
信仰纪录片观后感
2015/06/08 职场文书
文案策划岗位个人自我评价(范文)
2019/08/08 职场文书
Python获取百度热搜的完整代码
2021/04/07 Python
python 中的@运算符使用
2021/05/26 Python
Python 数据科学 Matplotlib图库详解
2021/07/07 Python
纯html+css实现Element loading效果
2021/08/02 HTML / CSS
Mysql多层子查询示例代码(收藏夹案例)
2022/03/31 MySQL