javascript - 获取目标元素之后的所有元素id

Question

那么如何获取目标元素之后的所有元素，例如我想获取 id 调用 c 之后的所有元素，无论 c 之后的元素数量有多少

例如

d
e
f

我想在 id 元素调用输出中输出结果

这是我被困的代码

/*
Get all the elements ids after the id call c and output those 
ids in the id call output 

For example 
document.querySelector('#output').innerHTML = ??;

How?
*/

#output{
  color: red;
}

<h1 id='a' class='letters'>A</h1>
<h1 id='b' class='letters'>B</h1>
<h1 id='c' class='letters'>C</h1>
<h1 id='d' class='letters'>D</h1>
<h1 id='e' class='letters'>E</h1>
<h1 id='f' class='letters'>F</h1>

<h1 id='output'></h1>

Answer 1

您可以使用 document.querySelectorAll('#c ~ .letters') ，它使用 general sibling combinator :

document.querySelector('#output').innerHTML = Array.from(
  document.querySelectorAll('#c ~ .letters')
).map(element => element.textContent).join(' ');

#output{
  color: red;
}

<h1 id='a' class='letters'>A</h1>
<h1 id='b' class='letters'>B</h1>
<h1 id='c' class='letters'>C</h1>
<h1 id='d' class='letters'>D</h1>
<h1 id='e' class='letters'>E</h1>
<h1 id='f' class='letters'>F</h1>

<h1 id='output'></h1>