如何高效简化JavaScript DOM选择器代码？jQuery转原生JS优化问询

首先要指出你当前写法的一个关键问题：jQuery的.show()并不是固定将元素display设为inline-block，它会恢复元素原本的display值（如果元素之前是被hide()隐藏的，jQuery会记录之前的display；如果元素默认是display: none，则会根据元素类型自动设置合适的display，比如div用block，span用inline）。所以固定设inline-block可能会破坏元素原本的布局。

以下是几种更高效、优雅且符合原生JS最佳实践的实现方式：

1. 精准模拟jQuery的.show()行为 #

如果需要完全对齐jQuery的逻辑，原生JS可以通过移除display样式属性来让元素恢复默认或之前的显示状态：

// 批量处理多个元素
document.querySelectorAll('.class1').forEach(el => {
  el.style.removeProperty('display');
});

// 或者更简洁的等价写法
document.querySelectorAll('.class1').forEach(el => el.style.display = '');

这种方式会让元素回到它在没有行内样式时的display状态，完美匹配jQuery.show()的核心逻辑。

2. 使用CSS类控制（推荐） #

这是现代前端更推崇的方式，将样式逻辑剥离到CSS中，JS只负责操作类名，更易维护且性能更优：
首先在CSS中定义：

.hidden { display: none; }
.show { display: revert !important; }

然后原生JS中只需操作类名即可：

document.querySelectorAll('.class1').forEach(el => {
  el.classList.remove('hidden');
  el.classList.add('show');
});

如果元素原本是通过hidden类隐藏的，直接移除hidden类就足够：

document.querySelectorAll('.class1').forEach(el => el.classList.remove('hidden'));

这种方式的优势在于样式统一管理，后续调整显示逻辑只需修改CSS，无需改动JS。

3. 简洁单行写法（适合简单场景） #

如果不需要兼容过旧的浏览器（现代浏览器均支持），可以把逻辑压缩成一行，同时保持可读性：

document.querySelectorAll('.class1').forEach(el => el.style.display = '');

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