JavaScript 如何获取整个页面使用的所有 class
<!DOCTYPEhtml><htmllang="cmn-Hans"><head><metacharset="UTF-8"><title>Document</title>...
<!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>
如以上页面包含了 claheader, posabs, clanav, disflex, clafooter, disblock, claul, padz, pasde，共九个 class，如何使用 JavaScript 获取，又如何更改 class 的属性？ 展开
<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>
如以上页面包含了 claheader, posabs, clanav, disflex, clafooter, disblock, claul, padz, pasde，共九个 class，如何使用 JavaScript 获取，又如何更改 class 的属性？ 展开
1个回答
展开全部
纯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);
//获取指定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!=""){
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>
用jquery会很简单。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
