自定义DOM操作–getElementsByClassName,addClassName,removeClassName
##代码如下:
(function (w) {
w.lily={};
lily.getElementsByClassName = function (className) {
var arr =[];
var allNodes = document.getElementsByTagName("*");
//https://www.cnblogs.com/allforone/p/4184632.html
//逆向思维
//循环每个节点的class 看一看有没有我们想要的那个className
for(var i=0;i<allNodes.length;i++){
var reg = new RegExp("\\s+"+className+"\\s+");
var classStr = " "+allNodes[i].className+" ";
if(reg.test(classStr)){
arr.push(allNodes[i])
}
}
return arr;
}
lily.trim =function (str) {
// var reg = /^\s+|\s+$/g;
var reg = /^\s*|\s*$/g;
str = str.replace(reg,"")
return str;
}
lily.addClass = function (node,className) {
if(node){
if(node.className){
//代表className不为空
var reg = new RegExp("\\s+"+className+"\\s+","i");
var classStr = " "+node.className+" ";
if(reg.test(classStr)){
//包含目标class
}else {
//不包含目标class
node.className += " "+className;
}
}else {
// 代表className为空
node.className=className;
}
}else {
throw new Error("当前节点不存在")
}
}
lily.removeClass=function (node,className) {
if(node){
if(node.className){
var classStr = " "+node.className+" ";
var reg = new RegExp("\\s+"+(className)+"\\s+","ig");
node.className = lily.trim(classStr.replace(reg," "))
if(!node.className){
node.removeAttribute("class")
}
}
}else {
throw new Error("当前节点不存在");
}
}
})(window)
##html代码片段:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/index.js" type="text/javascript"></script>
</head>
<style>
#wrap {
width: 100px;
height: 100px;
}
.bc{
color: orange;
}
</style>
<body>
<div id="#wrap">哈哈哈哈</div>
<script>
var wrap=document.getElementById("#wrap");
console.log(wrap);
lily.addClass(wrap,"bc");
</script>
</body>
</html>
###如有任何遗漏和不正之处,欢迎留言!
317
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
