Выделение блока
в общем у меня такой вопрос.
При выполнении д/з (вставки всяких элементов и функциями с вопросами) , я столкнулся с проблемой, а именно, выделением блока с какой то нуммерацией ( на самом деле хотелось бы разобраться в этом что это).
У нас есть блок шапки, и при выделении этой шапки через let navMenu = document.getElementsByClassName("menu"); и после выведении ее в консоль,появляется такая надпись : HTML collection [ul.menu], и после разворота (нажатием стрелочки слева) есть нуммерация, и является ли эта нуммерация объектом, или же псевдо-массивом? Ведь в объекте мы задаем ключи, а в массиве - нет. Вот что там находится --> [0]: ul.menu
И вот два вопроса: является ли тогда эта HTML collection [ul.menu] объектом, и если да, то почему там вместо ключа нуммерация?Если нет, то тогда это псевдо-массив, верно? В общем у меня есть проблемы с терминами, но в общей сути я представляю как это выглядит.
P.S
И да, после вставки let (переменная) = document.getElementsByClassName("название класса")[0]; все работает, и быстро справился с заданием
Ответы (1 шт):
html коллекция является Nodelist объектом
Это можно проверить с помощью NodeList.prototype.isPrototypeOf(htmlCollection)
const mydivs = document.querySelectorAll('mydiv');
console.log(NodeList.prototype.isPrototypeOf(mydivs));<mydiv>текст1</mydiv>
<mydiv>текст1</mydiv>
<mydiv>текст1</mydiv>
<mydiv>текст1</mydiv>
<mydiv>текст1</mydiv>
html коллекцию можно разными путями сделать - самому собрать или использовать методы:
document.querySelectorAll('selector')
document.getElementsByClassName('class')
document.getElementsByTagName('tag')
Может ещё есть, это основные методы получения коллекции
Но для простого понимания - это почти массив, у него есть некоторые методы и свойства, которые есть у массива, но не все.
Чтобы сделать настоящим массивом html-коллецию, необходимо сделать так:
const mydivs = Array.from(document.querySelectorAll('mydiv'));
console.log(NodeList.prototype.isPrototypeOf(mydivs));<mydiv>текст1</mydiv>
<mydiv>текст1</mydiv>
<mydiv>текст1</mydiv>
<mydiv>текст1</mydiv>
<mydiv>текст1</mydiv>И теперь проверка на Nodelist нам говорит, что это не Nodelist, потому что мы его сделали простым масивом(не все методы массивом могут корректно работать, так что не удивляйтесь)
Но вам для практики показываю пример, что по html-коллекции можно пробегаться и работать почти как с обычным массивом:
const mydivs = document.querySelectorAll('mydiv');
for (let i = 0; i < mydivs.length; i++) {
mydivs[i].innerHTML = mydivs[i].innerHTML + ' уходи ' + i + '!';
}mydiv {
display: block;
}<mydiv>текст1</mydiv>
<mydiv>текст1</mydiv>
<mydiv>текст1</mydiv>
<mydiv>текст1</mydiv>
<mydiv>текст1</mydiv>