为什么我收到querySelectorAll（）错误

Question

我试图实现document.getElementsByAttribute函数，但我附带了以下内容：

function getElementsByAttribute(att, val){

    return document.querySelectorAll(`[${att} = ${val}]`)

}

但是为什么当我尝试直接在控制台上键入return语句时出现错误：

document.querySelectorAll("["id" = "btn"]")

与getElementsByAttribute2('id', 'btn')吗？

Answer 1

但是为什么当我尝试直接在控制台上键入return语句时出现错误：

document.querySelectorAll("["id" = "btn"]")

因为您在控制台中输入的内容与您在功能中所拥有的不同。 您的函数使用模板文字 ：

document.querySelectorAll(`[${att} = ${val}]`)

而且，模板文字可以直接插入到常规文字字符串中，而不必担心引用它们或将它们与字符串的其余部分连接在一起。

直接输入控制台时，您没有使用模板文字，而只是使用文字，在这种情况下，引号和连接很重要。 引号是成对出现的，因此第一对是： "[" ，其后紧跟id ，因为您没有将这两个部分串联在一起：

"[" + id

它将引发错误-可能类似于unexpected identifier 。

CSS属性选择器应采用以下形式：

[attributeName comparisonOperator value]

仅当值中包含空格时，才需要在值周围加上引号。 所以你可以这样写：

document.querySelectorAll("[id=btn]");