如何在不改变符号类型的前提下对类数组集合执行类似splice的删除？

要实现不改变原集合类型的删除筛选操作，核心是利用DOM集合的原生构造逻辑，结合已知可合法查询目标子集的前提，直接生成同类型的筛选后集合，以下是可行方案：

核心思路 #

大部分DOM内置集合（NodeList/HTMLCollection/DOMTokenList）都可以通过其对应的上下文（如父元素、DOM元素）重新生成同类型实例，同时利用CSS选择器或数组筛选保留需要的元素——既不破坏原节点的事件绑定，也能维持原集合的类型特性。

具体实现代码 #

通用筛选函数 #

function filterCollection(originalCollection, keepCondition) {
  const Constructor = originalCollection.constructor;
  const firstItem = originalCollection[0];

  // 针对不同DOM集合类型处理
  if (Constructor === NodeList) {
    // NodeList通过querySelectorAll生成，利用选择器排除目标元素
    const baseSelector = getSharedSelector(originalCollection);
    const excludeSelector = '.body'; // 对应要移除的p.body元素
    const parent = firstItem?.parentElement || document;
    return parent.querySelectorAll(`${baseSelector}:not(${excludeSelector})`);
  }

  if (Constructor === HTMLCollection) {
    // HTMLCollection是实时集合，通过临时标记+父元素重新获取
    const keepItems = Array.from(originalCollection).filter(keepCondition);
    keepItems.forEach(item => item.dataset._keepFlag = '1');
    
    // 从父元素获取同类型的HTMLCollection，筛选出带标记的元素
    const parent = firstItem.parentElement;
    const filtered = parent.children;
    
    // 清理临时标记
    keepItems.forEach(item => delete item.dataset._keepFlag);
    return filtered;
  }

  if (Constructor === DOMTokenList) {
    // DOMTokenList对应classList等，直接筛选后生成新实例
    const keepTokens = Array.from(originalCollection).filter(keepCondition);
    const dummy = document.createElement('div');
    dummy.classList.add(...keepTokens);
    return dummy.classList;
  }

  // 自定义可迭代类型回退：假设构造函数支持数组参数
  return new Constructor(Array.from(originalCollection).filter(keepCondition));
}

// 辅助函数：获取集合元素的共同选择器（基于已知可查询前提）
function getSharedSelector(nodes) {
  const node = nodes[0];
  let selector = node.tagName.toLowerCase();
  if (node.className) selector += `.${node.className.replace(/\s+/g, '.')}`;
  return selector;
}

调用示例 #

// 用户提供的原始集合（比如NodeList）
const userProvidedCollection = document.querySelectorAll('p');
// 定义保留规则：排除带body类的p标签
const keepRule = node => !node.classList.contains('body');
// 得到与原类型一致的筛选后集合
const resultCollection = filterCollection(userProvidedCollection, keepRule);

方案优势 #

• 严格保留原类型：返回值和输入集合的Symbol类型完全匹配，实时集合（如HTMLCollection）的特性不受影响
• 不破坏原节点：直接操作原DOM节点，事件绑定、属性关联全部保留
• 实现简洁：基于原生API处理，无需复杂兼容逻辑

注意点 #

• 处理HTMLCollection时，因为是实时集合，要注意DOM操作的时序，临时标记的方式能避免筛选过程中集合的动态变化干扰
• 自定义可迭代类型需要确保其构造函数支持接收数组作为参数，否则需要单独适配构造逻辑

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