英文:
document.getElementsByClassName - How to get elements having ONLY the specified Class - no Secondary or Subclasses
问题
使用getElementsByClassName，我找不到一种方法可以仅查找具有“Cover”类的元素，而不查找还具有“Cover”类和“place-holder”类的元素。
另外，我对“place-holder”类的第二个类应该使用什么术语有疑问。我们是否应该将该类称为子类，还是仅仅将其视为元素上的第二个类？
以下是简单的JavaScript代码：
document.getElementsByClassName("Cover");
// 找到五个元素。如何告诉它仅查找具有Cover类的元素？
请注意，以上内容是你要翻译的部分，不包括问题部分。
英文:
How do I locate ONLY the elements having the class "Cover" but not the elements having more classes than Cover. Using getElementsByClassName I was not able to discover a way for it to NOT also find elements having the "Cover" class and also the "place-holder" class.
Also I question what the correct terminology is for the 2nd class of "place-holder". Do we refer to that class as a subclass or is it simply just a 2nd class on the element?
<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>
Simple Javascript:
document.getElementsByClassName("Cover");
// finds five elements. How do I tell it to find ONLY elements having the Cover Class?
答案1
得分: 2
let elems = [...document.getElementsByClassName('Cover')]
.filter(i => i.classList.length === 1)
console.log(elems)
<div>
<a class="Cover" href="javascript:void(0);" tabindex="1" aria-label="名字：firstName" style="height: 38px; left: 26px; width: 1035px; top: 274.375px;"></a>
<a class="Cover" href="javascript:void(0);" tabindex="2" aria-label="姓氏：lastName" style="height: 38px; left: 26px; width: 1035px; top: 314.375px;"></a>
<a class="Cover" href="javascript:void(0);" tabindex="3" aria-label="后缀：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" style="height: 108px; left: 26px; width: 1035px; top: 1619.75px;"></a>
</div>
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
let elems = [...document.getElementsByClassName('Cover')]
.filter(i=>i.classList.length===1)
console.log(elems)
<!-- language: lang-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>
<!-- end snippet -->
答案2
得分: 2
简单地：
<!-- 开始代码片段: js 隐藏: false 控制台: true Babel: false -->
<!-- 语言: lang-js -->
const onlyCover = document.querySelectorAll('.Cover');
onlyCover.forEach(elm => {
console.log(elm.className, elm.textContent);
})
<!-- 语言: lang-html -->
<div>
<a href="#" class="Cover">aa</a>
<a href="#" class="Cover">bb</a>
<a href="#" class="Cover">cc</a>
<a href="#" class="Cover place-holder">dd</a>
<a href="#" class="Cover">ee</a>
</div>
<!-- 结束代码片段 -->
英文:
simply:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const onlyCover = document.querySelectorAll('[class="Cover"]');
onlyCover.forEach( elm =>
{
console.log( elm.className, elm.textContent );
})
<!-- language: lang-html -->
<div>
<a href="#" class="Cover" >aa</a>
<a href="#" class="Cover" >bb</a>
<a href="#" class="Cover" >cc</a>
<a href="#" class="Cover place-holder" >dd</a>
<a href="#" class="Cover" >ee</a>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论