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

那么，我如何获取目标元素之后的所有元素呢？例如，我想获取id调用c之后的所有元素，而不管c之后的元素数量如何

比如说

d
e
f

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

这是我的密码，我一直坚持着

/*
在id调用c之后获取所有元素id并输出这些id
id调用输出中的id
例如
document.querySelector（“#output”）.innerHTML=？？；
怎样
*/

#输出{
颜色：红色；
}

A
B
C
D
E
F

获取c的位置，然后获取以下所有H1：

 const c = document.querySelector("#c");
 const h1s = [...document.querySelectorAll("h1")];
 const position = h1s.indexOf(c);

 const result = h1s.filter((_, i) => i > position);

  for(const entry of result)
    output.appendChild(entry.cloneNode(true));

---

您可以使用

document.querySelectorAll（“#c~.letters”）

，它使用：

document.querySelector（'#output'）。innerHTML=Array.from(
document.queryselectoral（“#c~.letters”）
).map（element=>element.textContent）.join（“”）
#输出{
颜色：红色；
}
A
B
C
D
E
F
一种可能的方法：


//使用命名函数，传入CSS选择器：
让getAllAfter=函数（选择器）{
//这里我们返回document.querySelectorAll（）的结果，
//使用Array.from（）转换数组后，如NodeList
//对数组执行以下操作：
返回数组.from(
document.queryselectoral(
//使用传入的选择器并连接
//使用一般同级组合符（“~”）和
//大小写使用“.letters”将选择器限制为元素
//包含该类：
选择器+“~.字母”）
);
}
//设置id为“output”的元素的textContent
//等于元素数组-已映射
//使用Array.prototype.map（）和连接
//使用Array.prototype.join（）生成的数组：
document.getElementById（'output'）.textContent=getAllAfter（'#c'）.map（el=>el.textContent）.join（'，'）
#输出{
颜色：红色；
}
A
B
C
D
E
F
这里没有冒犯其他示例，但我注意到这里的一些代码示例在某些浏览器上会有一些兼容性问题，例如

IE 11，所以这在我测试的所有主要浏览器上都有效。以防万一，如果你试图让这个工作在IE 11，所以这里是我的例子


var afterC=[].slice.call（document.querySelectorAll（'#c~*.letters'））.map（函数（elem）{return elem.getAttribute（'id'）；}）；
document.querySelector（“#output”）.innerHTML=afterC
#输出{
颜色：红色；
}
A
B
C
D
E
F
感谢各位回复本帖，但我觉得托马斯·韦恩的方法符合我的风格，所以谢谢托马斯·韦恩，这解决了我的问题。