查詢選擇器屬性值以空字符串開頭失敗

Question

誰能解釋以下內容為何返回空列表的原因：

var el = document.createElement('div');
el.dataset.mydata="hello";
document.body.appendChild(el);
document.querySelectorAll('div[data-mydata^=""]');

（如果您想知道為什么要這樣做，那么實際的代碼就是使用變量作為querySelector中的屬性值。它所包含的函數被遞歸調用，在第一次運行時，該變量為空。）

Answer 1

發生這種情況是因為子字符串匹配的屬性選擇器很笨 ：

[att^=val]

表示一個具有att屬性的元素，其值以前綴“ val”開頭。 如果“ val”是空字符串，則選擇器不代表任何內容。

（強調我的。）

所有子字符串選擇器都被設計破壞：給定空字符串時，它們不返回任何內容（而不是匹配所有字符串）。 我不知道為什么，但這就是選擇器規范所說的。

最好的解決方法可能是在代碼中添加一個檢查，指出如果var為空，請改用'div[data-mydata]' （即僅檢查屬性是否存在，而不檢查其值）。

Answer 2

您應該實現以下條件：如果值為空，則在選擇器中使用=運算符；如果值不為空，則使用^=運算符。

嘗試運行以下代碼段

 var el = document.createElement('div'); var value = ""; el.dataset.mydata = value; document.body.appendChild(el); var elements = document.querySelectorAll(`div[data-mydata${value ? "^": ""}=""]`); console.log(elements.length);