多个类无法正常工作的 document.getElementsByClassName()答案

【问题标题】：document.getElementsByClassName() for Multiple classes not working correctly多个类无法正常工作的 document.getElementsByClassName()
【发布时间】：2015-10-29 00:05:50
【问题描述】：

我在优化公司代码期间卡在了 document.getElementsByClassName() 中。

问题来了：

我正在处理两种页面：

第一页有：

<div class="leaderboardad">...</div>

第二页有：

<div class="leaderboard above_header">...</div>

我们可以看到唯一的区别是类名，但是当我想写一个js文件使用document.getElementsByClassName()来检测这两个div时，发生了一些事情：

if(document.getElementsByClassName('leaderboard above_header')){
   console.log("2 classes");
}else if(document.getElementsByClassName('leaderboardad')){
  console.log("1 class");
}

此代码适用于第二页，我总是在第一页的控制台中获得“2 个类”。

然后当我将代码更改为

if(document.getElementsByClassName('leaderboardad')){
   console.log("1 class");
}else if(document.getElementsByClassName('leaderboard above_header')){
  console.log("2 classes");
}

此代码适用于第一页，但我总是在第二页的控制台中获得“1 类”。

假设我们不能更改页面中的类名，我该怎么办？

【问题讨论】：

使用 document.queryselectorAll()
其实我的回答并不太有用——虽然getElementsByClassName 确实总是真实的，因此属于第一个if 声明，它可能不会解决你的实际问题，这看起来可能是XY Problem。您要解决什么实际问题？
嗨，詹姆斯，感谢您的帮助。在我正在处理的页面中，有些有“排行榜”类，有些有“排行榜 above_header”。我想用js代码检测这两种页面，html代码不能做改动。我在你的代码中找到了一些线索，大有帮助。
好的 - 将我的答案编辑为更符合我认为你之后的内容

标签： javascript

【解决方案1】：

getElementsByClassName:

返回具有所有给定类名的所有子元素的类数组对象。

这意味着当在if 语句中使用时，它将始终是“真实的”。您需要检查类数组对象的长度以查看返回了多少元素：

if (document.getElementsByClassName('leaderboard above_header').length > 0){
    //found at least one element with both classes
    console.log("2 classes");
} else if(document.getElementsByClassName('leaderboardad').length > 0){
    //found at least one element with the single class
    console.log("1 class");
}

【讨论】：

谢谢詹姆斯，这正是我从你之前的答案中找到的答案。