如何使用JavaScript确定并更改HTML文档中的所有h2标记

我有一个HTML文档，在h1或h2中有不同的标题。h2标题有一类“分标题”。我想让所有的h2标签在我点击时变成白色

在我下面的JavaScript代码中，您可以看到我试图用一个“subHeadline”类将HTML文档中的所有元素作为目标。但是，当我单击第一个h2标记时，它只会使其变为白色。如果单击，如何使所有h2标题变为白色？这是我的代码：

<h1> The first h1</h1>
<p> Random paragraph text. </p>

<h1> The second h1</h1>
<p> Random paragraph text. </p>

<h1> The third h1</h1>
<p> Random paragraph text. </p>

<h2 class="subHeadline"> The first h2</h2>
<p> Random paragraph text. </p>

<h2 class="subHeadline"> The second h2</h2>
<p> Random paragraph text. </p>

<h2 class="subHeadline"> The third h2</h2>
<p> Random paragraph text. </p>
<script>

let headline = document.querySelector('h1');
headline.addEventListener('click', changeHeader);

function changeHeader() {
  headline.style.color = 'white';
}

let subHead = document.querySelector('.subHeadline');
subHead.addEventListener('click', changeSubheader);

function changeSubheader() {
  subHead.style.color = 'white';
}

第一个h1
随机段落文本

第二个h1
随机段落文本

第三个h1
随机段落文本

第一个h2
随机段落文本

第二个h2
随机段落文本

第三个h2
随机段落文本

让headline=document.querySelector（'h1'）；
headline.addEventListener（'click'，changeHeader）；
函数changeHeader（）{
headline.style.color='白色'；
}
设副标题=document.querySelector（“.subHeadline”）；
副标题.添加的标题列表（“单击”，更改副标题）；
函数更改子标题（）{
分目.样式.颜色='白色'；
}

您必须迭代所有标题并附加事件处理程序

为此，可以使用

querySelectorAll

和

forEach

。有关和的详细信息，请参见文档

正如下面@Andreas所建议的，您可以对标题和副标题行使用单个

querySelectorAll

：

document.querySelectorAll('h1, .subHeadline');

您需要对函数做一些小的更改，以将click事件作为参数。此事件作为一个

target

属性，它将是您单击的标题

函数更改颜色（事件）{
event.target.style.color='white'；
}
document.queryselectoral（'h1，.subHeadline'））
.forEach（el=>el.addEventListener（'click'，changeColor））
第一个h1
随机段落文本

第二个h1
随机段落文本

第三个h1
随机段落文本

第一个h2
随机段落文本

第二个h2
随机段落文本

第三个h2
随机段落文本
 
您必须迭代所有标题并附加事件处理程序

为此，可以使用
querySelectorAll
和
forEach
。有关和的详细信息，请参见文档

正如下面@Andreas所建议的，您可以对标题和副标题行使用单个
querySelectorAll
：

document.querySelectorAll('h1, .subHeadline');

您需要对函数做一些小的更改，以将click事件作为参数。此事件作为一个
target
属性，它将是您单击的标题


函数更改颜色（事件）{
event.target.style.color='white'；
}
document.queryselectoral（'h1，.subHeadline'））
.forEach（el=>el.addEventListener（'click'，changeColor））
第一个h1
随机段落文本

第二个h1
随机段落文本

第三个h1
随机段落文本

第一个h2
随机段落文本

第二个h2
随机段落文本

第三个h2
随机段落文本
 
文档。querySelector
仅查找文档中的第一个匹配元素-这就是事件侦听器仅处理第一个元素的原因。要修复此问题，请改为使用
querySelectorAll
，并遍历生成的集合以单独添加侦听器

请注意，我必须更改事件侦听器，以便它们只影响单击的元素。它们将事件对象本身作为参数（这里我称之为
e
，这是一种常见的约定），然后
e.target
是单击的实际元素


let headlines=document.querySelectorAll（'h1'）；
headline.forEach（headline=>headline.addEventListener（'click'，changeHeader））；
函数更改头（e）{
e、 target.style.color='白色'；
}
设subHeaders=document.queryselectoral（“.subHeadline”）；
分标题.forEach（分标题=>分标题.addEventListener（'click'，changeSubheader））；
职能转变分目（e）{
e、 target.style.color='白色'；
}
第一个h1
随机段落文本

第二个h1
随机段落文本

第三个h1
随机段落文本

第一个h2
随机段落文本

第二个h2
随机段落文本

第三个h2
随机段落文本
 
文档。querySelector

仅查找文档中的第一个匹配元素-这就是事件侦听器仅处理第一个元素的原因。要修复此问题，请改为使用

querySelectorAll

，并遍历生成的集合以单独添加侦听器

请注意，我必须更改事件侦听器，以便它们只影响单击的元素。它们将事件对象本身作为参数（这里我称之为

e

，这是一种常见的约定），然后

e.target

是单击的实际元素

let headlines=document.querySelectorAll（'h1'）；
headline.forEach（headline=>headline.addEventListener（'click'，changeHeader））；
函数更改头（e）{
e、 target.style.color='白色'；
}
设subHeaders=document.queryselectoral（“.subHeadline”）；
分标题.forEach（分标题=>分标题.addEventListener（'click'，changeSubheader））；
职能转变分目（e）{
e、 target.style.color='白色'；
}

第一个h1
随机段落文本

第二个h1
随机段落文本

第三个h1
随机段落文本

第一个h2
随机段落文本

第二个h2
随机段落文本

第三个h2
随机段落文本
 

在标记上使用onclick事件，将元素本身传递给函数并将其变为白色

功能a（e）{
e、 style.color='白色'；
}

第一个h1
随机段落文本

第二个h1
随机段落文本