Значение атрибута селектора запроса начинается с пустой строки

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);