Коллекции, получаемые методом
querySelectorAll(), являются
статичными и содержат "слепок" состояния элементов на момент вызова этого метода.
Коллекции типа
getElementsByClassName() являются
живыми и отображают актуальное состояние.
Например, получим со страницы все элементы с классом
.box двумя методами:
Код
const boxesQuery = document.querySelectorAll('.box');
const boxesGet = document.getElementsByClassName('box');
Удалим из обоих выборок первый элемент:
Код
boxesQuery[0].remove();
boxesGet[0].remove();
Метод
remove() работает с DOM-элементами и удаляет их непосредственно из вёрстки.
Выводим результат в консоль и увидим, что:
Код
console.log(boxesQuery); // => NodeList
console.log(boxesGet); // => HTMLCollection
Так вот, первый нам покажет 3 элемента, как и было на момент вызова метода, а второй покажет один элемент(так как 2 элемента удалились двойным вызовом метода
remove()).
Живые коллекции не имеют методов работы с элементами коллекции.
Поэтому придумали получать из этого псевдомассива массив, например:
Код
Array.from(boxesGet);
И это уже будет настоящий массив со всеми его методами.
Метод matches()
Возвращает
true или
false в зависимости от того, соответствует ли элемент указанному css-селектору
Есть три блока
div Код
<div class="box"></div>
<div class="box this"></div>
<div class="box"></div>
Как выбрать блок с классом
.this по селектору?
Код
const boxes = document.querySelectorAll('.box');
boxes.forEach(elem => {
if (elem.matches('.this')) {
console.log('Done');
}
});
Метод closest()
Возвращает ближайший родительский элемент, который соответствует заданному селектору, или
null, если таковых элементов вообще нет.
Например:
Код
console.log(boxes[0].closest('.wrapper'));
Так мы нашли ближайший родительский элемент с классом
.wrapper для первого элемента выборки.
Добавлять комментарии могут только зарегистрированные пользователи.
