Пусть у нас есть абзацы:
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
Давайте получим наши абзацы в переменную:
let elems = document.querySelectorAll('p');
Как вы уже знаете, в переменной elems
будет массив абзацев. На самом деле, однако,
это не совсем массив, а массивоподобный объект
или псевдомассив.
Псевдомассивы ведут себя похожим на обычные массивы образом, но не поддерживают все возможности массивов.
Что общего
К элементам псевдомассива, как и к элементам обычного массива, можно обратиться по их номеру:
console.log(elems[0]);
console.log(elems[1]);
console.log(elems[2]);
Можно также узнать количество элементов с
помощью свойства length:
console.log(elems.length);
Можно перебрать элементы псевдомассива циклом:
for (let elem of elems) {
console.log(elem);
}
В чем отличия
Хотя псевдомассивы и похожи на массивы, но
все же это обычные объекты. У них нет свойств
и методов массивов, таких как forEach,
join, slice и других:
console.log(elems.slice(1, 3)); // будет ошибка
Как отличить
Существует специальный метод Array.isArray,
который возвращает true, если параметром
ему передан массив, и false в остальных
случаях:
let test1 = [1, 2, 3];
console.log(Array.isArray(test1)); // выведет true
let test2 = {a: 1, b: 2, c: 3};
console.log(Array.isArray(test2)); // выведет false
let test3 = 'abcde';
console.log(Array.isArray(test3)); // выведет false
Для псевдомассивов этот метод также вернет
false:
let elems = document.querySelectorAll('p');
console.log(Array.isArray(elems)); // выведет false
Практические задачи
Даны абзацы:
let elems = document.querySelectorAll('p');
Проверьте, будут ли работать методы массивов
для переменной elems.