Ресурсы: Про селекторы Немного о псевдомассивах
DOM - В соответствии с объектной моделью документа («
Document Object Model», коротко
DOM), каждый HTML-тег является объектом.
Вложенные теги являются «детьми» родительского элемента. Текст, который находится внутри тега, также является объектом.
Чтобы обратиться к глобальному объекту
DOM, используется слово
document, например, с методом
write() getElementById() Код
<div class="box" id="box">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
</div>
Код
const box = document.getElementById('box'); // нашли элемент по id и сохранили в переменную
Код
<div class="box" id="box">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
</div>
Код
const btns = document.getElementsByTagName('button'); // получаем псевдомассив, HTML-коллекцию
Получим первый элемент этой коллекции по аналогии, как получаем элемент обычного массива:
Код
console.log(btns[0]);
Цитата
Даже если бы на странице сайта искомых элементов с тегом button было всего 1 штука, метод всё равно вернул бы HTML-коллекцию.
Код
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
Код
const circles = document.getElementsByClassName('circle'); // получили псевдомассив с этими элементами
Более современные методы
querySelectorAll() Код
<div class="wrapper">
<div class="heart"></div>
<div class="heart"></div>
<div class="heart"></div>
</div>
Код
const hearts = document.querySelectorAll('.heart'); // получаем псевдомассив, NodeList
console.log(hearts[0]); // доступ к первому элементу выборки
Цитата
Для выборки, полученной этим методом, доступен метод forEach()
Пример применения
forEach() к выборке:
Код
hearts.forEach(item => {
console.log(item); // поочерёдно выводим все элементы выборки в консоль
});
Возвращает только первый, удовлетворяющий условиям поиска, элемент.
Код
<div class="wrapper">
<div class="heart"></div>
<div class="heart"></div>
<div class="heart"></div>
</div>
Код
const oneHeart = document.querySelector('.heart');
// в переменной сохранится только первый элемент с таким классом
Добавлять комментарии могут только зарегистрированные пользователи.
