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加ASP二级域名转向的代码
May 17 Javascript
JQuery 学习技巧总结
May 21 Javascript
JS根据生日算年龄的方法
May 05 Javascript
全面解析Bootstrap图片轮播效果
Dec 03 Javascript
JavaScript中判断数据类型的方法总结
May 24 Javascript
javascript之Boolean类型对象
Jun 07 Javascript
jQuery为动态生成的select元素添加事件的方法
Aug 29 Javascript
js实现带三角符的手风琴效果
Mar 01 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
Apr 12 Javascript
浅谈Node.js 沙箱环境
May 15 Javascript
深入浅析Vue中mixin和extend的区别和使用场景
Aug 01 Javascript
让JavaScript代码更加精简的方法技巧
Jun 01 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
《OVERLORD》手游英文版即将上线 手机上也能扮演骨王
2020/04/09 日漫
php 使用GD库为页面增加水印示例代码
2014/03/24 PHP
PHP原生函数一定好吗?
2014/12/08 PHP
php eval函数一句话木马代码
2015/05/21 PHP
php 中奖概率算法实现代码
2017/01/25 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
用JavaScript实现动画效果的方法
2013/07/20 Javascript
jquery.validate的使用说明介绍
2013/11/12 Javascript
window.location.href IE下跳转失效的解决方法
2014/03/27 Javascript
JS中使用Array函数shift和pop创建可忽略参数的例子
2014/05/28 Javascript
JQuery $.each遍历JavaScript数组对象实例
2014/09/01 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
2017/08/19 jQuery
Webpack 服务器端代码打包的示例代码
2017/09/19 Javascript
基于es6三点运算符的使用方法(实例讲解)
2017/10/12 Javascript
nodejs 最新版安装npm 的使用详解
2018/01/18 NodeJs
D3.js实现拓扑图的示例代码
2018/06/30 Javascript
基于vue-upload-component封装一个图片上传组件的示例
2018/10/16 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
2018/10/31 Javascript
vue-cli3+typescript新建一个项目的思路分析
2019/08/06 Javascript
Python操作sqlite3快速、安全插入数据(防注入)的实例
2014/04/26 Python
详解Python if-elif-else知识点
2018/06/11 Python
介绍一款python类型检查工具pyright(推荐)
2019/07/03 Python
在Python函数中输入任意数量参数的实例
2019/07/16 Python
Flask框架实现的前端RSA加密与后端Python解密功能详解
2019/08/13 Python
在 Python 中接管键盘中断信号的实现方法
2020/02/04 Python
python编写扎金花小程序的实例代码
2021/02/23 Python
HTML5去掉输入框type为number时的上下箭头的实现方法
2020/01/03 HTML / CSS
澳大利亚巧克力花束和礼品网站:Tastebuds
2019/03/15 全球购物
日语专业个人的求职信
2013/12/03 职场文书
党员个人思想汇报
2013/12/28 职场文书
会计岗位描述
2014/02/22 职场文书
校园主题婚礼活动策划方案
2014/09/15 职场文书
村主任群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
2015试用期转正工作总结
2014/12/12 职场文书
创业计划书之个人工作室
2019/08/22 职场文书
SQL实现LeetCode(197.上升温度)
2021/08/07 MySQL