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

Question

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

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

问题是，当想要隐藏没有 id 的 <div> 以及 div 的 class 有多个名称时，例如下面：

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

如何隐藏这样一个没有 ID 且没有单个 class 名称的 div？

Answer 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>

对于类名，请记住您可以指定所有类名（如果有其他元素包含类列表的一部分，有时这有助于查明一个元素：

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

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

使用 getElementsByClassName() 的想法大致相同 - 同样，它 returns 是一个集合，必须使用 [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>

当 div 的 class 有多个名称时，如何使用 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?

html

hide