#css #css-selectors
#css #css-селекторы
Вопрос:
Кто-нибудь может объяснить этот конкретный селектор JavaScript:
document.querySelectorAll("div[class^='tile']");
конкретно ^= часть?
Комментарии:
1. Это обычный селектор CSS. JavaScript на самом деле не имеет к этому никакого отношения, кроме использования селекторов CSS через selectors API.
Ответ №1:
Это атрибут CSS3 «начинается с» селектора
Таким образом, выбираются все разделы, которые имеют атрибут class, начинающийся с «title»
Ответ №2:
Это означает, что атрибут слева должен начинаться со значения справа.
Итак div class="tile0" , div class="tiles" и т.д. будет соответствовать селектору.
Ответ №3:
document.querySelectorAll() принимайте запросы, подобные CSS селекторам, для выбора элементов DOM. MDN — лучший справочник для понимания того, как это работает. querySelector они являются частью DOM Selector API, полную спецификацию можно найти здесь.
Этот код, который вы включили сюда, использовал запрос селектора атрибутов. Селекторы атрибутов не ограничены классом. Вы можете использовать любой атрибут, который вы хотите (и который доступен) для выбора. Например, если у вас есть этот HTML:
<label for="myInput">My Lable</label>
затем этот селектор выберет ваш элемент:
document.querySelector('input[for="myInput"]');
Оператор между атрибутом и значением может быть следующим:
[attr=value] : Выбирает элемент, атрибут которого полностью равен заданному значению
[attr*=value] : Выбирает элементы, у которых есть атрибут, содержащий заданное значение. Как mvalue , value valueone ….
[attr~=value] : То же, что *= но value должно быть разделено пробелом. Нравится my value
[attr$=value] : Заканчивается value
[attr^=value] : Начинается с value
[attr!=value] : Не равно value