第一种 纯数组操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>removeclass
</title>
</head>
<body>
<div class="demo test hi"></div>
<button onclick="removeClass()">Go
</button>
<script>
let demo = document.querySelectorAll(".demo")
function removeClass() {
let start = new Date().getTime()
let classArr = []
for(let i = 0, l = demo.length; i < l; i++) {
demo[i].className.split(' ').map(function(val) {
if(val !== 'test') {
classArr.push(val)
}
})
demo[i].className = classArr.join(' ')
classArr = []
}
let end = new Date().getTime()
console.log(end - start)
}
</script>
</body>
</html>
这里的思路是获取dom的className，然后转化为array操作再将结果转化为str赋值给className
第二种 正则匹配
function removeClass() {
let start =
new Date().getTime()
let classArr = []
for(
let i =
0, l = demo.length; i < l; i++) {
demo[i].className.replace(
'test',
'').split(
/\s+/g).map(
function(val) {
if(val !==
'test') {
classArr.push(val)
}
})
demo[i].className = classArr.join(
' ')
classArr = []
}
let end =
new Date().getTime()
console.log(end - start)
}
这里的思路与上面差不多，不过是用正则去判断要除去的className
效率
即使在操作的dom长度增加到300，两者的耗时也几乎不差。所以两者效率是一样的
