JS中getElementsByClassName与classList兼容性问题解决方案分析
作者:MaoTr 时间:2023-08-25 05:39:06
本文实例讲述了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
标签:JS,getElementsByClassName,classList,兼容
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
在js中的replace方法详解
2007-08-21 15:47:00
python之拟合的实现
2021-09-16 19:22:12
![](https://img.aspxhome.com/file/2023/5/95265_0s.png)
教程:MySQL中多表操作和批处理方法
2009-07-30 08:20:00
python opencv 图像拼接的实现方法
2021-06-21 19:11:51
![](https://img.aspxhome.com/file/2023/3/67933_0s.jpg)
TensorFlow实现RNN循环神经网络
2023-03-18 18:12:49
![](https://img.aspxhome.com/file/2023/3/118393_0s.png)
macOS M1(AppleSilicon) 安装TensorFlow环境
2022-05-26 04:03:34
使用python tkinter开发一个爬取B站直播弹幕工具的实现代码
2021-06-02 19:15:06
![](https://img.aspxhome.com/file/2023/5/81495_0s.png)
window.location 对象所包含的属性
2024-04-16 10:32:14
jQuery代码的14条改善技巧[译]
2009-12-02 10:02:00
![](https://img.aspxhome.com/file/UploadPic/200912/2/01-56s.jpg)
PHP中关于php.ini参数优化详解
2024-05-13 09:51:31
go语言获取系统盘符的方法
2024-05-22 10:19:47
利用Python还原方阵游戏详解
2022-01-28 03:59:44
keras打印loss对权重的导数方式
2023-05-17 18:21:11
详解Python自动化中这八大元素定位
2023-06-04 18:25:34
![](https://img.aspxhome.com/file/2023/5/124935_0s.png)
Python在字典中获取带权重的随机值实现方式
2022-12-11 05:21:44
Python中如何创建多线程?
2022-11-25 15:52:34
JSP实现用户登录、注册和退出功能
2024-03-18 10:13:43
![](https://img.aspxhome.com/file/2023/7/97907_0s.png)
使用classList来实现两个按钮样式的切换方法
2024-04-16 09:35:19
![](https://img.aspxhome.com/file/2023/8/136588_0s.jpg)
手机浏览器唤起微信分享(JS)
2024-04-19 09:56:18
pandas 数据实现行间计算的方法
2021-07-21 06:00:40