兼容getElementsByClassName与classList（ie8及以上）
知乎文章地址：https://zhuanlan.zhihu.com/p/52423430
之前面试的时候考到对html元素的class进行增删改，然后有前辈说如果使用classList并且通过原型实现兼容，会非常满意，由此想到对getElementsByClassName与classList这两个接口进行浏览器兼容。不过目前仅兼容到ie8，下面是具体的一些方案：
兼容getElementsByClassName：
// 兼容getElementsByClassName
if (!('getElementsByClassName' in document)) {
function getElementsByClassName (classList) {
if (typeof classList !== 'string') throw TypeError('the type of classList is error')
// 获取父元素
var parent = this
// 获取相应子元素
var child = parent.getElementsByTagName('*')
var nodeList = []
// 获得classList的每个类名 解决前后空格 以及两个类名之间空格不止一个问题
var classAttr = classList.replace(/^\s+|\s+$/g, '').split(/\s+/)
for (var j = 0, len = child.length; j < len; j++) {
var element = child[j]
for (var i = 0, claLen = classAttr.length; i < claLen; i++) {
var className = classAttr[i]
if (element.className.search(new RegExp('(\\s+)?'+className+'(\\s+)?')) === -1) break
}
if (i === claLen) nodeList.push(element)
}
return nodeList
}
// 兼容ie5及以上的document的getElementsByClassName接口
document.getElementsByClassName = getElementsByClassName
// 兼容ie8及以上的getElementsByClassName接口
window.Element.prototype.getElementsByClassName = getElementsByClassName
}
兼容classList:
// 兼容classList
// 定义一个classList对象
function ClassList (obj) {
this.obj = obj
}
// 提取add、remove和contains中的公共方法
function op (self, valArr, tag) {
var className = self.obj.className
if (tag === 2) {
if (valArr.length === 0) throw TypeError("Failed to execute 'contains' on 'DOMTokenList': 1 argument required, but only 0 present.")
if (typeof valArr[0] !== 'string' || !!~valArr[0].search(/\s+/g)) return false
return !!~className.search(new RegExp(valArr[0]))
}
for (var i in valArr) {
if(typeof valArr[i] !== 'string' || !!~valArr[i].search(/\s+/g)) throw TypeError('the type of value is error')
var temp = valArr[i]
var flag = !!~className.search(new RegExp('(\\s+)?'+temp+'(\\s+)?'))
if (tag === 1) {
!flag ? className += ' ' + temp : ''
} else if (tag === 3) {
flag ? className = className.replace(new RegExp('(\\s+)?'+temp),'') : ''
}
}
self.obj.className = className
}
ClassList.prototype.add = function () {
var self = this
op(self, arguments, 1)
}
ClassList.prototype.contains = function () {
var self = this
return op(self, arguments, 2)
}
ClassList.prototype.item = function (index) {
typeof index === 'string' ? index = parseInt(index) : ''
if (arguments.length === 0 || typeof index !== 'number') throw TypeError("Failed to execute 'toggle' on 'DOMTokenList': 1 argument required, but only 0 present.")
var claArr = this.obj.className.replace(/^\s+|\s+$/, '').split(/\s+/)
var len = claArr.length
if (index < 0 || index >= len) return null
return claArr[index]
}
ClassList.prototype.remove = function () {
var self = this
op(self, arguments, 3)
}
ClassList.prototype.toggle = function (value) {
if(typeof value !== 'string' || arguments.length === 0) throw TypeError("Failed to execute 'toggle' on 'DOMTokenList': 1 argument(string) required, but only 0 present.")
if (arguments.length === 1) {
this.contains(value) ? this.remove(value) : this.add(value)
return
}
!arguments[1] ? this.remove(value) : this.add(value)
}
var div = document.createElement("div")
if (undefined === div.classList) {
console.log(111)
// 兼容ie8及以上的classList，不过对于ie8需要加上括号
window.Element.prototype.classList = function () {
return new ClassList(this)
}
}
// 封装一个方法获取classList(因为上面封装的是一个函数，为了统一调用，采用下面的方法)
function getClassList (el) {
if (!el) throw TypeError("Failed to execute 'getClassList': 1 argumen required, but only 0 present.")
if (typeof el.classList === 'function') {
return el.classList()
}
return el.classList
}
上面这种方法稍微有点繁琐，正常来说我们想要实现仅仅访问classList属性即可，故而，我们可以采用以下的方法，同样兼容到ie8:
if (!("classList" in document.documentElement)) {
Object.defineProperty(window.Element.prototype, 'classList', {
get: function () {
var self = this
function update(fn) {
return function () {
var className = self.className.replace(/^\s+|\s+$/g, ''),
valArr = arguments
return fn(className, valArr)
}
}
function add_rmv (className, valArr, tag) {
for (var i in valArr) {
if(typeof valArr[i] !== 'string' || !!~valArr[i].search(/\s+/g)) throw TypeError('the type of value is error')
var temp = valArr[i]
var flag = !!~className.search(new RegExp('(\\s+)?'+temp+'(\\s+)?'))
if (tag === 1) {
!flag ? className += ' ' + temp : ''
} else if (tag === 2) {
flag ? className = className.replace(new RegExp('(\\s+)?'+temp),'') : ''
}
}
self.className = className
return tag
}
return {
add: update(function (className, valArr) {
add_rmv(className, valArr, 1)
}),
remove: update(function (className, valArr) {
add_rmv(className, valArr, 2)
}),
toggle: function (value) {
if(typeof value !== 'string' || arguments.length === 0) throw TypeError("Failed to execute 'toggle' on 'DOMTokenList': 1 argument(string) required, but only 0 present.")
if (arguments.length === 1) {
this.contains(value) ? this.remove(value) : this.add(value)
return
}
!arguments[1] ? this.remove(value) : this.add(value)
},
contains: update(function (className, valArr) {
if (valArr.length === 0) throw TypeError("Failed to execute 'contains' on 'DOMTokenList': 1 argument required, but only 0 present.")
if (typeof valArr[0] !== 'string' || !!~valArr[0].search(/\s+/g)) return false
return !!~className.search(new RegExp(valArr[0]))
}),
item: function (index) {
typeof index === 'string' ? index = parseInt(index) : ''
if (arguments.length === 0 || typeof index !== 'number') throw TypeError("Failed to execute 'toggle' on 'DOMTokenList': 1 argument required, but only 0 present.")
var claArr = self.className.replace(/^\s+|\s+$/, '').split(/\s+/)
var len = claArr.length
if (index < 0 || index >= len) return null
return claArr[index]
}
}
}
})
}
值得注意的是，ie10、11虽然支持classList，但是其中add和remove方法不支持删除多个class，另外对于toggle方法，其传入的第二个布尔类型的参数无效。
另外提示，数组的indexOf方法不支持ie8及以下的浏览器。
最后，分享一下鄙人的github地址~~~浏览器兼容研究学习：
yaodebian/Browser-Compatiblegithub.com