Получение элементов на странице и работа с ними

const box = document.getElementById('box');

const btns = document.getElementsByTagName('button');

const circles = document.getElementsByClassName('circle');

const hearts = document.querySelectorAll('.heart');
// hearts.forEach(item => {
//     console.log(item);
// });

const oneHeart = document.querySelector('.heart');

for (let i = 0; i < hearts.length; i++) {
    hearts[i].style.backgroundColor = 'blue';
}

hearts.forEach(item => {
    item.style.backgroundColor = 'blue';
});

const div = document.createElement('div');
// const text = document.createTextNode('Тут был я');

box.style.backgroundColor = 'blue';
box.style.width = '500px';
box.style.cssText = 'background-color: blue; width: 500px';
btns[1].style.borderRadius = '100%';
circles[1].style.backgroundColor = 'red';

div.classList.add('black');

document.body.append(div);

wraper.append(div);
// wraper.appendChild(div); // Это устаревший метод

wraper.prepend(div);

hearts[1].before(div);

hearts[1].after(div);

wraper.insertBefore(div, hearts[1]);  // Первым параметром мы указываем какой элемент вставляем, вторым – перед каким элементом мы его вставляем.

circles[0].remove();
// Устаревший метод удаления элемента
// wraper.removeChild(hearts[1]);

hearts[0].replaceWith(circles[1]);
// Устаревший метод замены элемента
// wraper.replaceChild(circles[1], hearts[0]); // Первым аргументом указываем тот элемент на который меняем, вторым – тот каокторый меняем

div.innerHTML = "<h1>Hello, World!</h1>";  // Подходит для вставки HTML

// div.textContent = "<h1>Hello</h1>"; // Подходиьт для вставки только текста (не HTML)

div.insertAdjacentHTML('afterend', '<h2>Hello2</h2>'); //Первый аргумент – это специальное слово, второй – текст который мы хотим вставить