当 div 的类有多个名称时，如何使用 getElementsByClassName(<classname>).outerHTML="" 隐藏 <div>？答案

【问题标题】：How can I use getElementsByClassName(<classname>).outerHTML="" to hide a <div> when there are multiple names for the div's class?当 div 的类有多个名称时，如何使用 getElementsByClassName(<classname>).outerHTML="" 隐藏 <div>？
【发布时间】：2021-12-31 02:18:02
【问题描述】：

我正在尝试学习如何使用 javascript getElementsByClassName("<classname>").outerHTML="" 隐藏网页上的 <div> 部分。

如果我隐藏的元素，这一切都很好。 <div class="someclassname">Some content I want to hide</div>。或者，如果使用 getElementByID("<divId>") 如果使用例如，我会成功。 <div id="somedivID">.

问题是，当想要隐藏没有id 的<div> 并且为 div 的类列出多个名称时，如下所示：

<div class="cake forest carousel">Some content I want to hide.</div>

如何隐藏这样一个没有id也没有单一类名的div？

【问题讨论】：

标签： html hide

【解决方案1】：

对于类，您可以使用 document.querySelectorAll() 和 css 选择器，如下所示：

document.querySelector('button').addEventListener('click', () => {
  document.querySelectorAll('.cake')[0].style.display = 'none';
});

<div class="cake forest carousel">Some content I want to hide.</div>
<button>Hide content</button>

使用 classNames，请记住您可以指定所有的 classNames（如果有其他元素包含 classList 的一部分，有时这对于查明一个元素很有用：

document.querySelectorAll('.cake.forest.carousel')[0] . . .

还要注意document.querySelectorAll() 返回一个集合，而不是一个字符串——这就是为什么必须使用[0] 表示法来选择集合中返回的第一个元素。

使用getElementsByClassName() 的想法大致相同——同样，它返回一个集合，必须使用[0] 表示法来获取第一个元素（通常只返回一个元素），或者使用forEach() 循环来获取第一个元素根据其他标准选择所需的元素。

document.querySelector('button').addEventListener('click', () => {
  document.getElementsByClassName('cake forest')[0].style.display = 'none';
});

<div class="cake forest carousel">This div has classes cake, forest and carousel</div>
<div class="cake">This div only has class cake</div>
<button>Hide divs with classes cake AND forest</button>

【讨论】：

太棒了，它成功了！谢谢谢谢！我欠你一杯啤酒！