优化传统方法的必要性 在网页开发中，我们常会遇到需要根据特定条件（例如URL中是否包含某个关键词）来动态调整页面元素显示状态的需求。传统的做法可能是为每个需要操作的元素编写一段独立的JavaScript代码，或者多次调用 document.getElementById() 并单独设置样式。这种方法在处理少量元素时尚可接受，但当需要操作的元素数量增多时，会导致代码冗余、可读性差，且难以维护和扩展。
例如，原始的单元素隐藏脚本如下：
若要隐藏多个ID，就需要重复上述代码块，这显然不是一个高效的解决方案。此外，如果需要同时应用 display: none 和 visibility: hidden 等多种样式，代码的重复性问题会更加突出。
核心解决方案：数组迭代与样式应用 为了解决上述问题，我们可以采用一种更优雅、更具扩展性的方法：将所有目标元素的ID存储在一个数组中，然后通过遍历这个数组来统一处理每个元素。
-
构建ID列表 首先，定义一个JavaScript数组，其中包含所有需要操作的HTML元素的ID字符串。
const idList = ['something', 'something-else', 'another-thing', 'yet-another'];
-
遍历元素并应用样式 接下来，使用数组的 forEach() 方法遍历 idList 中的每一个ID。在每次迭代中，通过 document.getElementById() 获取对应的DOM元素，然后对其应用所需的CSS样式。
idList.forEach((id) => { const element = document.getElementById(id); // 检查元素是否存在，避免对null进行操作 if (element != null) { element.style.display = 'none'; // 隐藏元素并移除其占用的空间 element.style.visibility = 'hidden'; // 隐藏元素但保留其占用的空间 // 还可以添加其他样式，例如： // element.style.borderColor = 'green'; } });document.getElementById(id) 方法用于根据给定的ID查找并返回对应的DOM元素。如果找不到该ID的元素，它将返回 null。 forEach() 方法则为数组中的每个元素执行一次提供的回调函数。
增强代码健壮性：空元素处理 在实际开发中，HTML结构可能会发生变化，或者某些ID可能拼写错误，导致 document.getElementById() 返回 null。如果不进行检查而直接对 null 引用进行样式操作，将会导致JavaScript运行时错误。因此，在获取元素后，务必添加一个 if (element != null) 判断，确保只有当元素确实存在时才进行后续操作。
为了更好地调试和维护，当发现指定的ID不存在时，可以使用 console.warn() 方法在开发者控制台输出警告信息，提示开发者哪个ID未能找到，这对于排查问题非常有帮助。
if (element != null) {
// 应用样式
} else {
console.warn(`警告：未找到ID为 "${id}" 的元素。`);
}完整示例 将URL检查逻辑、ID列表、元素遍历、样式应用和错误处理整合到一起，形成一个完整的、高效的脚本：
根据URL条件批量隐藏DOM元素 元素一元素二元素三 (不存在)元素四元素五请尝试在浏览器地址栏中添加 `?keyword=thisword` 或 `/#thisword` 来观察效果。
在上述示例中，当URL中包含 "thisword" 时（例如 http://localhost/yourpage.html?keyword=thisword 或 http://localhost/yourpage.html#thisword），idList 中指定的元素将会被隐藏。同时，如果 not-a-thing 这个ID没有在HTML中定义，控制台会输出相应的警告。
立即学习“Java免费学习笔记（深入）”；
注意事项与最佳实践
-
display: none 与 visibility: hidden 的区别：
- display: none：元素将从文档流中完全移除，不占据任何空间，其子元素也会一并隐藏。这是最彻底的隐藏方式。
- visibility: hidden：元素会被隐藏，但它仍然占据着文档流中的空间，就像它还在那里一样，只是不可见。其子元素可以通过设置 visibility: visible 来重新显示。 根据具体需求选择合适的隐藏方式。在大多数需要完全移除元素视觉和布局影响的场景下，display: none 是首选。
代码可维护性与扩展性： 将所有目标ID集中在一个数组中，大大提高了代码的可维护性。当需要添加或移除一个被隐藏的元素时，只需修改 idList 数组即可，而无需修改多处代码逻辑。这使得功能扩展变得简单高效。
性能考虑：document.getElementById() 是所有DOM查找方法中效率最高的一种，因为它直接通过哈希表查找元素。即使在大型文档中，其性能也表现优异。因此，使用ID数组并循环查找是处理批量元素的一种非常高效的方式。
-
脚本位置： 为了确保脚本能够找到并操作DOM元素，通常建议将JavaScript脚本放在HTML文档的
标签的末尾，或者使用 DOMContentLoaded 事件来确保DOM完全加载后再执行脚本。在上述示例中，脚本放在 标签之前，可以确保在脚本执行时，HTML元素已经解析并可用。
总结 通过将目标元素的ID组织成一个数组，并结合 forEach 循环和 document.getElementById 方法，我们可以优雅且高效地实现根据URL条件批量隐藏或样式化多个DOM元素。这种模式不仅减少了代码冗余，提高了可读性和可维护性，还通过内置的空元素检查机制增强了代码的健壮性。掌握这种技术，能够帮助开发者编写出更专业、更易于管理的前端脚本。
