本文介绍一种健壮、可维护的 Vanilla JS 文章过滤实现方式——通过缓存 DOM 节点引用并动态重渲染，避免因 removeChild() 导致节点丢失而无法恢复的问题。
本文介绍一种健壮、可维护的 vanilla js 文章过滤实现方式——通过缓存 dom 节点引用并动态重渲染，避免因 `removechild()` 导致节点丢失而无法恢复的问题。
在构建纯 JavaScript 的前端过滤功能时，一个常见误区是直接对 DOM 节点反复调用 removeChild() 和 appendChild() 来“隐藏”或“显示”元素。问题在于：一旦节点被 removeChild() 移除且未妥善保存其引用，它将从 DOM 树中彻底消失；后续即使尝试重新插入，若原始引用已丢失（如未缓存），就无法还原——这正是原代码中“隐藏后无法再出现”的根本原因。
正确的思路是分离数据与视图：将所有 <article></article> 元素的 DOM 引用预先缓存为纯 JavaScript 对象（即 Node 实例），后续过滤仅操作该引用数组，而渲染逻辑则统一负责清空容器并按需追加匹配节点。
✅ 推荐实现方案（结构清晰 + 高可维护性）
首先，为文章区域添加语义化容器（如 .article-overview），确保所有 <article></article> 元素归属明确：
<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 逻辑：
立即学习“Java免费学习笔记（深入）”；
// 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()更高效。
✅ 总结
该方案摒弃了“临时移除 → 试图恢复”的脆弱模式，转而采用声明式渲染：每次过滤都基于完整数据源生成最新视图。它具备良好的扩展性（支持多标签组合过滤、搜索联动等）、清晰的职责划分（数据管理 vs UI 渲染），且完全不依赖框架，是 Vanilla JS 动态列表过滤的最佳实践之一。
