JS代码中document.querySelector相关三元表达式的作用是什么？

代码逻辑解释 #

你提到的这行代码是JavaScript中三元条件运算符的简写写法，作用是避免操作不存在的DOM元素报错，同时清除上一个选中按钮的指定类名，具体拆分逻辑如下：

拆分逐段解析 #

1. 首先执行判断条件 document.querySelector('.inner-button')
   • 该方法会在整个页面DOM树中查找第一个携带inner-button类名的元素
   • 找到就返回对应DOM元素对象，找不到就返回null
2. 三元运算符的执行逻辑为判断条件 ? 条件成立时执行 : 条件不成立时执行，对应到这行代码：
   • 条件成立（存在带inner-button的元素）：执行document.querySelector('.inner-button').classList.remove('inner-button')，移除该元素的inner-button类名
   • 条件不成立（不存在对应元素）：执行''空语句，也就是什么都不做，避免报错

等价的标准if语句写法 #

你之前写的if语句不生效，大概率是没有做非空判断就直接调用classList方法，页面初始没有对应元素时会抛出Cannot read properties of null (reading 'classList')的报错，阻断后续代码执行。这行代码的逻辑完全等价于下面的标准if写法：

// 先查找当前已激活的按钮
const activeBtn = document.querySelector('.inner-button')
// 只有存在已激活按钮时才执行移除类名操作
if (activeBtn) {
  activeBtn.classList.remove('inner-button')
}

配合整体交互的作用 #

在你的按钮单选逻辑中，这行代码承担的是「每次点击新按钮前，先清除上一个按钮的选中状态」的作用，后续再给当前点击的按钮加上inner-button类，就实现了只有当前点击的按钮持有指定类名的交互效果。

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