如何在不修改现有HTML的前提下用JavaScript实现图片画廊标签过滤？

• change事件触发逻辑：输入框内容失去焦点或用户按下回车时才触发，仅在值与上一次触发状态存在差异时响应。完全无法满足“敲击键盘时实时校验”的需求，输入过程中不会触发事件，仅在交互中断后执行逻辑，和作业要求的实时性不匹配。
• input事件触发逻辑：只要输入框的值发生任何变化（键盘输入、退格删除、粘贴、自动填充）就会立刻触发，响应逻辑完全对齐“用户敲击键盘时实时匹配校验”的要求，是本场景的唯一适用事件。

• 事件绑定：通过DOM选择器获取id="filter"的输入框元素，为其绑定input事件监听器，不要将事件绑定在外层form元素上。
• 输入值处理：在input事件的回调函数中，通过事件对象或this拿到输入框的当前值，统一做标准化处理：去除首尾空格、转换为全小写，避免因大小写差异、多余空格导致的匹配失效。
  • 空输入分支：当处理后的输入值为空时，需要将所有.thumb-display元素的hidden类移除，保证空输入时所有内容正常显示。
• DOM对应关系：一次性获取所有.thumb-display元素集合，遍历每个元素时，通过querySelector('.tags')拿到该卡片内部对应的标签文本节点，不需要单独维护DOM映射关系。
• 匹配规则设计：将单个.tags节点的文本做标准化处理：去掉所有#符号，按空格拆分出独立标签项，每个标签项同样做去空格、转小写的处理。只要用户的标准化输入是任意一个拆分后标签项的子串，即判定为匹配；否则为不匹配。
• 显隐控制：根据匹配结果操作对应.thumb-display元素的classList：
  • 不匹配时：调用classList.add('hidden')添加隐藏类
  • 匹配时：调用classList.remove('hidden')移除隐藏类
  • 全程不需要修改元素的行内样式，所有显隐控制都通过类名操作实现，完全符合“不修改现有HTML、仅用JS实现”的约束。

• 不要直接拿.tags的完整文本和用户输入做匹配，未拆分的标签文本会导致跨标签的无效字符出现误匹配（例如两个标签分别是#palmbeach、#distantpeaks，用户输入“beachdi”这种跨标签的连续字符，直接匹配整段文本会判定通过）
• 不要在每次输入触发事件时才临时查询所有DOM元素，初始时一次性缓存DOM集合可以减少重复查询的性能损耗
• classList的add/remove方法仅操作目标类名，不会覆盖元素已有的其他类名，相比手动拼接className更安全

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