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