如何正确选择属性名以@开头的DOM元素？解决选择器报错问题

你遇到的错误是因为使用了XPath选择器语法，但浏览器控制台的$()默认采用CSS选择器规则，两种语法不兼容导致报错。以下分场景给出正确选择方式：

场景1：直接选择带有@click属性的元素（未编译的Vue模板DOM） #

方式1：使用CSS选择器 #

CSS属性选择器中，属性名包含特殊字符（如@）时，可通过引号包裹属性名或转义特殊字符：

// 引号包裹属性名
$('div["@click"="login()"]')

// 转义@符号（字符串中需用双反斜杠）
$('div[\\@click="login()"]')

方式2：使用XPath选择器 #

浏览器控制台提供$x()函数专门用于XPath语法，直接使用你原本的逻辑即可：

$x('//div[@click="login()"]')

场景2：选择Vue编译后的元素 #

Vue编译后会将@click指令转换为事件监听器，不会在DOM上保留@click属性，此时无法通过属性选择器直接定位，可通过遍历元素检查事件监听器：

Array.from(document.querySelectorAll('div')).find(el => {
  const clickEvents = getEventListeners(el).click || [];
  return clickEvents.some(evt => evt.listener.name === 'login');
})

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