JS中getElementsByClassName与classList兼容性问题解决方案分析
作者:MaoTr 发布时间:2023-08-25 05:39:06
标签:JS,getElementsByClassName,classList,兼容
本文实例讲述了JS中getElementsByClassName与classList兼容性问题解决方案。分享给大家供大家参考,具体如下:
document(element).getElementsByClassName(classNames:classString);
HTML5新添加了这个方法,这个方法可以通过document和html元素调用,接受一个参数,这个参数包含一个或多个类名的字符串,返回带有制定类型的NodeList(存在性能问题),传入的多个类型顺序不重要。这个方法仅仅在标准浏览器下有效,在非标准浏览器下无效。
<body>
<p class="p1 p">p1 p</p>
<p class="p"> p</p>
<script type="text/javascript">
var aP = document.getElementsByClassName(' p p1' );
alert(aP.length);
/*标准 : 1*/
/*非标准:Error:对象不支持“getElementsByClassName”属性或方法*/
</script>
</body>
解决兼容性的方式:
var getElementsByClassName = (function (classList,/*optional*/parent){
if(typeof classList !== "string") throw TypeError("the type of classList is error");
var parent = parent || window.document;/*添加默认值*/
if(parent.getElementsByClassName){/*如果是标准浏览器支持该方法*/
return parent.getElementsByClassName(classList);
}else{/*如果不支持该方法即非标准浏览器*/
var child = parent.getElementsByTagName("*");
var nodeList = [];
/*获得classList的每个类名 解决前后空格 以及两个类名之间空格不止一个问题*/
var classAttr = classList.replace(/^\s+|\s+$/g,"").split(/\s+/);
for(var j = 0,len_j = child.length; j<len_j; j++){
var element = child[j];
for(var i = 0,len_i = classAttr.length; i< len_i; i++){
var _className = classAttr[i];
if(element.className.search(new RegExp("(\\s+)?"+_className+"(\\s+)?")) === -1){
break;
}
}
if(i===len_i) nodeList.push(element);
}
return nodeList;
}
});
classList属性
classList属性是HTML5新增的一个属性,在这个属性下有几个方法:
Add(value)将给定的字符串值增加到列表中,如果存在,就不会添加。
Contains(value)表示列表中是否存在给定的值,如果存在返回true,否则返回false。
Remove(value)从列表中删除给定的字符串。
Toggle(value)如果列表中已经存在给定的值,删除它,如果没有给定的值,增加它。
支持classList的浏览器有Firefox3.6+和chrome和IE10+。
解决兼容性:
var classList = null;
(function(){
classList = function (obj){
this.obj = obj;
};
classList.prototype.add = function(value){
if(typeof value !== "string") throw TypeError("the type of value is error");
if(this.obj.classList){
this.obj.classList.add(value);
}else{
var arr = value.replace(/^\s+|\s+$/g,"").split(/\s+/);
this.obj.classList +=" "+arr.join(" ");
}
};
classList.prototype.contains = function(value){
if(typeof value !== "string") throw TypeError("the type of value is error");
if(this.obj.classList){
return this.obj.classList.contains(value);
}else{
var arr = value.replace(/^\s+|\s+$/g,"").split(/\s+/);
var _className = this.obj.className;
for(var i = 0,len= arr.length; i<len; i++){
if(_className.search(new RegExp("(\\s+)?"+arr[i]+"(\\s+)?"))===-1){
return false;
}
}
return true;
}
};
classList.prototype.remove = function(value){
if(typeof value !== "string") throw TypeError("the type of value is error");
if(this.obj.classList){
return this.obj.classList.remove(value);
}else{
var arr = value.replace(/^\s+|\s+$/g,"").split(/\s+/);
var _className = this.obj.className;
for(var i = 0, len = arr.length;i<len; i++){
if(_className.search(new RegExp("(\\s+)?"+arr[i]+"(\\s+)?"))!==-1){
_className = _className.replace(new RegExp("(\\s+)?"+arr[i]+"(\\s+)?"),"");
}
}
this.obj.className = _className;
}
};
classList.prototype.toggle = function(value){
if(typeof value !== "string") throw TypeError("the type of value is error");
if(this.contains(value)){
this.remove(value);
}else{
this.add(value);
}
};
})();
希望本文所述对大家JavaScript程序设计有所帮助。
来源:https://blog.csdn.net/wmaoshu/article/details/52131741
0
投稿
猜你喜欢
- 如果不是因为总监审查严格,一定要求这个细节解决掉,也许我也不会去深究根源性的解决办法,再此感谢MTIME负责而严格的同事。首先描述一下问题:
- 中介者模式中介者模式(Mediator Pattern)是一种常用的设计模式,用于解决各个对象之间的复杂依赖关系,使得各个对象之间可以独立地
- python类class定义及其初始化定义类,功能,属性一般类名首字母大写class Calculator:#名字和价格是属性
- Oracle text是Oracle的全文检索技术,是9i版本标准版和企业版的一部分。Oracle text使用标准的sql语言索引、查找、
- 一、首先你要确认你的鉴别模式:WIN NT鉴别模式呢还是混合模式,其中混合模式包括WIN NT鉴别模式和SQL SERVER 鉴别模式实施鉴
- 有三种主要的错误类型: 1.编译错误: 这种错误出现一般都是代码的语法问题。因为编译错误而导致辞ASP停止运行。 2.运行错误: 这个错误是
- 本文将介绍使用Dreamweaver来制作滑动菜单的方法,言归正传,废话少说。准备工作如下: 1. 在dw中新建一个空白文档(或者打开你要添
- 使用SQL语句生成带有小计合计的数据集:测试用户: scott测试用表: dept,emp/////////////////////////
- css里关于浏览器的兼容问题一直困惑着我们初级的css用户(高手可直接绕过),这里想根据我前段时间拜读的李超的书籍《css网站布局实录》里学
- Gtalk 软件的最下方有个很好又很实用的功能,就是 Gmail 邮件提醒功能。会定时更新你 Gmail 中未读新邮件的数量。试想
- 107条javascript(js)常用的方法技巧,十分的实用,相信看了下面的这些js编程技巧和方法,能够给javascript初学者解决很
- 字体设计是人类商业活动的需求,它随着时代和科学技术的进步而不断地变化着。被广泛应用于网络生活的各个方面。现代字体设计在计算机技术的应用中已经
- 一、前言越来越多的网站和App开始为用户搭建签到系统,以此来吸引和留住用户。签到系统是一种轻量、互动性强的营销方式,通过用户签到获取免费权益
- 本文实例讲述了Python基于多线程实现ping扫描功能。分享给大家供大家参考,具体如下:# -*- coding:utf-8 -*-#!
- 创建Spring Boot应用在基于Spring来重构JSP应用之前,我们先引入Spring Boot,使之成为一个Spring Boot应
- <%Class Cls_TemplateDim RegDim PageDim CIDDim SIDDim RuleDim Conten
- 对于windows平台来说安装完MySQL后,系统就已经默认生成了许可表和账户,你不需要像在Unix平台上那样执行 mysql_instal
- myisam_max_[extra]_sort_file_size足够大delay_key_write减少io,提高写入性能bulk_ins
- 过滤html代码的函数,当然也可以使用正则表达式。<%Function FilterHTML(strToFilter)&nb
- Go-ethereum 解析ethersjs中产生的签名信息在签名验证的过程中,我们判断签名正确的前提是,签名解析后的公钥,和发起这次动作的