Методы querySelector и querySelectorAll
Раньше найти какой-то элемент на веб-странице при помощи JavaScript было не так просто. Были методы document.getElementById(), document.getElementsByTagName() и т. п.
Это было настолько неудобно и при этом требовалось так часто, что jQuery завоевал огромную популярность хотя бы за то, что при помощи него можно было искать элементы просто передав произвольный CSS-селектор в параметрах функции, например: $('ul.products li') .
К счастью, в современном JS теперь тоже можно легко найти элементы по произвольному CSS-селектору без помощи сторонних библиотек.
Метод querySelector находит первый элемент, подходящий условию и возвращает его, а querySelectorAll находит все элементы и возвращает их список.
// Найдёт первый элемент с классом thumb на странице
var firstThumb = document.querySelector('.thumb'); // Найдёт все элементы с классом thumb на странице
var thumbs = document.querySelectorAll('.thumb'); // Найдёт все тэги LI вложенные в тег UL
var types = document.querySelectorAll('ul li');
Этот список очень похож на массив, даже при выводе через console.log() выглядит именно так. Но при этом он не является массивом. Например, у него нельзя вызвать метод map.
// Этот код выдаст ошибку
document.querySelectorAll('li').map(el => el.innerText);Чтобы обойти этот недостаток, можно воспользоваться оператором расширения ... из ES6.
// А вот такой код — сработает
[...document.querySelectorAll('li')].map(el => el.innerText);Искать элементы при помощи этих методов можно на всей странице или в конкретном элементе, который был найден ранее.
// Поиск всех тэгов P на странице
var paragraphsList = document.querySelectorAll(’p’);// Поиск всех тегов B внутри первого тега P, который мы нашли ранее
var b = paragraphsList[0].querySelectorAll(’b’);
В этих методах можно использовать почти любые CSS-селекторы, за исключением селекторов псевдо-селекторов (:hover, ::after и т. п.).
Эти методы очень удобны при прототипировании. Например, при помощи них можно через консоль разработчика получить данные с любой веб-страницы, сохранить их в JSON и вставить в Sketch, сэкономив силы на создании контента.
Вот пример, в котором можно поиграться с кодом и опробовать метод на практике:
Подписывайтесь на Телеграм-канал про дизайн, технологии и прототипирование «Детепр» (t.me/detepr).
