querySelector链式选择器无效报错：代码转换问题咨询

问题出在选择器里的:button——原生DOM的querySelector只支持标准CSS选择器，而:button是jQuery自定义的伪类选择器，标准CSS中不存在这个语法，因此浏览器判定它为无效选择器。

jQuery的:button选择器实际匹配两类元素：

• 所有<button>标签元素
• type属性为button、submit、reset的<input>元素

要实现和原jQuery选择器相同的效果，你需要把:button[name='checkout']替换成对应的标准CSS选择器组合，修正后的代码如下：

// 绑定第一个符合条件的元素
document.querySelector("button[name='checkout'], input[type='button'][name='checkout'], input[type='submit'][name='checkout'], input[type='reset'][name='checkout'], a[href$='checkout'], form[action='/cart'], input[name='checkout']").addEventListener('click', event => {
  console.log("do something")
})

如果需要给所有符合条件的元素绑定点击事件，应该使用querySelectorAll并遍历元素：

document.querySelectorAll("button[name='checkout'], input[type='button'][name='checkout'], input[type='submit'][name='checkout'], input[type='reset'][name='checkout'], a[href$='checkout'], form[action='/cart'], input[name='checkout']").forEach(el => {
  el.addEventListener('click', event => {
    console.log("do something")
  })
})

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