Firefox扩展开发：如何同时匹配class与title属性精准点击按钮？

解决方法 #

直接在document.querySelector的选择器规则中叠加title属性的匹配条件即可，修改后的代码如下：

function xxBtn(){
  var btn = document.querySelector('button.ooo-qqq-vvv[title="One (p)"]')
  if( !btn ){ return }
  btn.click()
}

原理说明 #

• CSS选择器支持通过[属性名="属性值"]的语法精准匹配对应属性值完全相等的元素，多个筛选规则叠加写在一起就代表需要同时满足所有条件
• document.querySelector本身就会返回匹配所有规则的第一个元素，刚好符合你只点击第一个符合要求按钮的需求
• 如果后续有模糊匹配title内容的需求，可以把属性选择器替换为[title*="匹配关键词"]，即可命中所有title包含指定关键词的元素

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