如何用document.getElementsByClassName获取仅含指定单一类的元素

问题 #

• 如何定位仅拥有Cover类的元素，排除同时包含Cover和place-holder等其他类的元素？使用document.getElementsByClassName无法实现过滤，该怎么处理？
• 元素上的第二个类place-holder的正确术语是什么？它是“子类”还是只是元素的第二个类？

HTML代码示例 #

<div>
    <a class="Cover" href="javascript:void(0);" tabindex="1" aria-label="First Name: firstName" style="height: 38px; left: 26px; width: 1035px; top: 274.375px;"></a>
    <a class="Cover" href="javascript:void(0);" tabindex="2" aria-label="Last Name: lastName" style="height: 38px; left: 26px; width: 1035px; top: 314.375px;"></a>
    <a class="Cover" href="javascript:void(0);" tabindex="3" aria-label="Suffix: Suffix" style="height: 38px; left: 26px; width: 1035px; top: 354.375px;"></a>
    <a class="Cover place-holder" href="javascript:void(0);" tabindex="10" style="height: 34px; left: 26px; width: 1035px; top: 634.375px;"></a>
    <a class="Cover" href="javascript:void(0);" tabindex="20" aria-label="Gender: Gender" style="height: 108px; left: 26px; width: 1035px; top: 1619.75px;"></a>
</div>

当前JavaScript代码 #

document.getElementsByClassName("Cover");

// 会找到5个元素，如何让它仅找到仅含Cover类的元素？

解决方案 #

1. 定位仅含Cover类的元素 #

有两种高效实现方式：

方法一：使用querySelectorAll结合精准属性选择器

直接通过CSS属性选择器匹配class属性值严格等于Cover的元素，一步到位：

const onlyCoverElements = document.querySelectorAll('a[class="Cover"]');

返回的是静态NodeList，可直接遍历使用。

方法二：过滤getElementsByClassName的结果

如果必须使用getElementsByClassName，可以将返回的HTMLCollection转为数组后，通过classList筛选出仅含Cover类的元素：

const allCovers = document.getElementsByClassName("Cover");
const onlyCoverElements = Array.from(allCovers).filter(el => {
  return el.classList.length === 1 && el.classList.contains('Cover');
});

利用classList.length判断类的数量，结合contains确保唯一类是Cover。

2. 类名术语说明 #

place-holder不是“子类”，它只是元素的第二个类名。HTML元素的class属性支持多个类名（用空格分隔），这些类名之间是平等独立的关系，不存在父类、子类的层级划分——所有类都是用于标识元素样式或行为的独立标识，彼此没有从属关系。

内容的提问来源于stack exchange，提问作者Code Novice