取得一个页面的所有class

来源：互联网发布：linux共享文件夹在哪编辑：程序博客网时间：2024/06/07 07:59

因为js函数库并没有去取得所有class的函数，

原生js:

<!DOCTYPE html>
<html lang="cmn-Hans">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<header class="claheader posabs">
<nav class="claheader clanav disflex"></nav>
</header>
<footer class="clafooter disblock">
<ul class="clafooter claul padz">
<li class="pasde"></li>
</ul>
</footer>
</body>
</html>
<script>

//获取所有的className
var classNames=getAllClassName();
console.log(classNames);
//获得只出现一次的class
for(var i=0;i<classNames.length;i++){
if(document.getElementsByClassName(classNames[i]).length==1)
console.log(classNames[i]);
}
//获取指定className的节点
var eles=getElementsByClassName("claheader");
//console.log(eles);
//修改节点的className
//把claheader替换为newclass
for(var i=0;i<eles.length;i++){
var ele=eles[i];
ele.className=ele.className.replace("claheader","newclass");
}

/**
* 获取指定className的节点
* @param {[type]} name [description]
* @return {[type]} [description]
*/
function getElementsByClassName(name){
var result=[];
var body=document.body;
getElementByClassName(body);
function getElementByClassName(ele){
var s=ele.className||"";
if(s!=""&&s.indexOf(name)!=-1){
result.push(ele);
}
var childs=ele.childNodes;
for(var i=0;i<childs.length;i++){
getElementByClassName(childs[i]);
}
}
return result;
}
/**
* 遍历DOM，获取所有节点的className，重复的只记录一遍。
*/
function getAllClassName(){
var result=[];
var body=document.body;

getClassName(body);
function getClassName(ele){
var s=ele.className||"";
if(s!=""){
console.log(s);
var arr=s.split(" ");
for(var i=0;i<arr.length;i++){
var name=arr[i];
if(name!=""&&result.indexOf(name)==-1){
//console.log(name);
result.push(name);
}
}
}
var childs=ele.childNodes;
for(var i=0;i<childs.length;i++){
getClassName(childs[i]);
}
}
return result;
}

</script>

阅读全文

1 0