为什么我收到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"]")

因为您在控制台中输入的内容与功能中的内容不同。您的功能使用 template literals ：

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

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

当您直接进入控制台时，您没有使用模板文字，您只使用了文字，在这种情况下引用和连接问题。引号成对出现，因此第一对是"["，紧接着是id，因为你没有像这样连接这两个部分：

"[" + id

它会抛出错误 - 可能类似于unexpected identifier。

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

[attributeName comparisonOperator value]

只有当值中包含空格时，才需要引用该值。所以你可以写：

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