Vanilla JavaScript 文章过滤器：基于节点引用的动态渲染方案-js教程-PHP中文网

Vanilla JavaScript 文章过滤器：基于节点引用的动态渲染方案

本文介绍一种健壮、可维护的 Vanilla JS 文章过滤实现方式——通过缓存 DOM 节点引用并动态重渲染，避免因 removeChild() 导致节点丢失而无法恢复的问题。

本文介绍一种健壮、可维护的 vanilla js 文章过滤实现方式——通过缓存 dom 节点引用并动态重渲染，避免因 `removechild()` 导致节点丢失而无法恢复的问题。

在构建纯 JavaScript 的前端过滤功能时，一个常见误区是直接对 DOM 节点反复调用 removeChild() 和 appendChild() 来“隐藏”或“显示”元素。问题在于：一旦节点被 removeChild() 移除且未妥善保存其引用，它将从 DOM 树中彻底消失；后续即使尝试重新插入，若原始引用已丢失（如未缓存），就无法还原——这正是原代码中“隐藏后无法再出现”的根本原因。

正确的思路是分离数据与视图：将所有 <article></article> 元素的 DOM 引用预先缓存为纯 JavaScript 对象（即 Node 实例），后续过滤仅操作该引用数组，而渲染逻辑则统一负责清空容器并按需追加匹配节点。

✅ 推荐实现方案（结构清晰 + 高可维护性）

首先，为文章区域添加语义化容器（如 .article-overview），确保所有 <article></article> 元素归属明确：

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

<div class="js-filter-list">
  <button type="button" data-filter="all">All</button>
  <button type="button" data-filter="cat-1">Cat 1</button>
  <button type="button" data-filter="cat-2">Cat 2</button>
  <button type="button" data-filter="cat-3">Cat 3</button>
  <button type="button" data-filter="cat-4">Cat 4</button>
</div>

<div class="article-overview">
  <article class="js-article cat-1">Cat 1 content</article><article class="js-article cat-2">Cat 2 content</article><article class="js-article cat-2 cat-3">Cat 2 & 3</article><article class="js-article cat-1">Another Cat 1</article><article class="js-article cat-4">Cat 4 only</article><article class="js-article cat-3 cat-4">Cat 3 & 4</article>
</div>

接着，使用模块化 JS 逻辑：

// 1. 缓存所有 article 节点（只执行一次）
const listOfArticleNodes = [...document.querySelectorAll('article.js-article')];

// 2. 清空容器工具函数
function emptyElementNode(elmNode) {
  while (elmNode.firstChild) {
    elmNode.removeChild(elmNode.firstChild);
  }
  return elmNode;
}

// 3. 渲染匹配文章的核心函数
function renderFilterRelatedArticles(filterName) {
  const articlesRoot = document.querySelector('.article-overview');
  emptyElementNode(articlesRoot);

  const filteredNodes = filterName === 'all'
    ? listOfArticleNodes
    : listOfArticleNodes.filter(el => el.classList.contains(filterName));

  filteredNodes.forEach(node => articlesRoot.appendChild(node));
}

// 4. 过滤按钮点击处理器（事件委托）
function handleFilterChange({ target }) {
  const button = target.closest('[data-filter]');
  if (!button) return;

  const filterName = button.dataset.filter;
  if (!filterName || button.classList.contains('selected')) return;

  // 更新选中状态
  button.parentElement.querySelectorAll('[data-filter]').forEach(btn =>
    btn.classList.remove('selected')
  );
  button.classList.add('selected');

  // 触发渲染
  renderFilterRelatedArticles(filterName);
}

// 5. 初始化
document.querySelector('.js-filter-list').addEventListener('click', handleFilterChange);

⚠️ 关键注意事项

永远不要依赖 .hide 类 + removeChild() 混合控制可见性：CSS 类适合视觉切换（如 display: none），而 removeChild() 是结构性移除，二者语义冲突，易引发状态不一致。
节点引用是“活”的：querySelectorAll() 返回的 NodeList 中每个元素都是真实 DOM 节点，即使脱离父容器，只要 JS 变量持有它，就能随时 appendChild() 回去——这是本方案可靠性的基石。
事件委托提升性能：只需绑定一次 click 监听器到 .js-filter-list，无需为每个按钮单独监听。
避免重复查询 DOM：listOfArticleNodes 在初始化时一次性获取并复用，比每次过滤都 querySelectorAll() 更高效。