如何使用纯JavaScript选择除第一个之外的所有元素并返回NodeList

嘿，我懂你想要保留NodeList类型结果的需求——毕竟原生DOM集合在某些场景下比数组更贴合DOM操作的场景。你当前的解构方法确实能实现功能，但因为解构会把可迭代的NodeList转换成数组，所以rest变成了数组。这里有几种直接获取NodeList的方案：

方案1：用CSS伪类直接筛选（最推荐） #

直接在querySelectorAll里用CSS选择器就能一步拿到目标NodeList，不需要额外转换：

方式A：:not(:first-child) #

通过排除第一个子元素的方式筛选，直接返回符合要求的NodeList：

const rest = document.querySelectorAll('div > p:not(:first-child)');
rest.forEach(p => { p.innerHTML = "" });

方式B：:nth-child(n+2) #

这个选择器表示选中从第2个开始的所有子元素，效果和上面完全一致，写法更直观：

const rest = document.querySelectorAll('div > p:nth-child(n+2)');
rest.forEach(p => { p.innerHTML = "" });

这两种方式都直接返回NodeList，完全符合你的需求，而且代码更简洁高效——筛选逻辑直接交给浏览器的CSS引擎处理，性能也更优。

方案2：基于现有完整NodeList筛选（如果已拿到全量集合） #

如果你已经有了包含所有元素的NodeList（比如你代码里的ps），也可以通过精准排除第一个元素来获取目标NodeList：

const ps = document.querySelectorAll('div > p');
// 基于第一个元素的位置，重新查询排除它的集合
const rest = document.querySelectorAll(`div > p:not(:nth-child(${ps[0].parentNode.children.indexOf(ps[0]) + 1}))`);
rest.forEach(p => { p.innerHTML = "" });

不过这种方式相对绕一些，除非你有必须基于全量集合操作的场景，否则还是方案1更实用。

为什么你的原方法返回数组？ #

你用的解构赋值const [first, ...rest] = ps之所以得到数组，是因为NodeList是可迭代对象，解构操作会自动把它转换成数组。虽然数组的forEach也能正常使用，但如果必须保留NodeList类型，上面的方案1是最优解。

内容的提问来源于stack exchange，提问作者Maik Lowrey