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