如何检测SVG元素带有指定aria-label属性值并执行对应函数

核心问题分析 #

• 大小写不匹配：aria-label的属性值是大小写敏感的，你代码选择器中写的是大写开头的Like，但实际HTML里的属性值是全小写的like，二者不匹配导致无法正确选中元素。
• 判断逻辑错误：document.querySelector()匹配成功时返回DOM元素对象，匹配失败返回null，直接和true做恒等判断永远会返回false，不需要额外和布尔值比较，直接判断变量本身即可。

修正后代码 #

JS 部分 #

function fn() {
    var likebtn = document.querySelector('.fr66n .wpO6b');
    // 选择器属性值和实际HTML一致，添加引号保证语法规范
    var unliked = document.querySelector('.fr66n .wpO6b svg[aria-label="like"]');
    var x = document.querySelector('#demo');

    if (unliked) {
        // 带有对应属性值时执行的逻辑
        x.innerHTML = "has"
    } else {
        // 不带有对应属性值时执行的逻辑
        x.innerHTML = "not"
    }
}

可选：不区分大小写匹配 #

如果业务场景中aria-label可能出现大小写混用的情况，可以在属性选择器末尾加i标识忽略大小写，写法如下：

var unliked = document.querySelector('.fr66n .wpO6b svg[aria-label="like" i]');

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