Есть полученные элементы со страницы:
Код
const box = document.getElementById('box');
const btns = document.getElementsByTagName('button');
const circles = document.getElementsByClassName('circle');
const hearts = document.querySelectorAll('.heart');
const oneHeart = document.querySelector('.heart');
Так мы можем взаимодействовать с инлайн-стилями (свойства пишутся в формате
camelCase):
Код
box.style.backgroundColor = 'blue';
box.style.width = '500px';
box.style.cssText = 'background-color: red; width: 500px;'
box.style.cssText = `background-color: red; width: ${num}px;`
btns[1].style.borderRadius = '100%';
circles[0].style.backgroundColor = 'red';
for (let i = 0; i < hearts.length; i++) {
hearts[i].style.backgroundColor = 'red';
}
hearts.forEach(heart => {
heart.style.backgroundColor = 'blue';
});
Методы для работы с элементами страницы
Создание нового элемента:
Код
const div = document.createElement('div'); // данный элемент существует только внутри JavaScript
Создание текстовых узлов (элементов без оболочки тега):
Код
const text = document.createTextNode('Тут был я');
Добавление класса к элементу:
Код
div.classList.add('black'); // добавление класса
Выводим элемент на страницу, помещая его в конец
body Код
document.body.append(div);
Помещаем элемент в блок
wrapper, минуя создание промежуточной переменной при получении этого блока (так можно сделать, если вы планируете использовать этот блок всего лишь один раз):
Код
document.querySelector('.wrapper').append(div);
Вставляем элемент в начало родительского блока:
Методы
before() и
after() позволяют вставлять элемент перед или после родительского блока
Код
hearts[0].before(div);
hearts[0].after(div);
Удалить элемент со страницы:
Заменить один элемент другим (первым указывается заменяемый элемент):
Код
hearts[0].replaceWith(circles[0]);
Устаревшие, но еще используемые методы
Метод appendChild() - помещает элемент в конец родительского блока
Код
wrapper.appendChild(div);
Вместо методов
prepend(),
before() и
after() использовали метод
insertBefore() ("вставить перед")
Метод имеет два аргумента: первый - это тот блок, который вставляется, а второй аргумент - перед каким элементом мы вставляем этот блок
Код
wrapper.insertBefore(div, hearts[0]);
Вместо метода
remove() использовался метод
removeChild() Код
wrapper.removeChild(hearts[1]);
Заменяли один элемент другим с помощью метода
replaceChild(), который имел аргументы, первым из которых был элемент, на который мы хотим что-то менять, второй - тот элемент, который заменяется
Код
wrapper.replaceChild(circles[0], hearts[0]);
Манипуляции с элементами
Вставляем текст в созданный ранее элемент
div Код
div.innerHTML = 'Hello, World';
Вставляем какой-то html-код тем же методом:
Код
div.innerHTML = '<h1>Hello, World</h1>';
Помещаем текст в выбранный элемент другим способом (работает только с текстом):
Код
div.textContent = 'Hello, World';
Вставить какой-то кусок кода перед или после определённых тегов можно с помощью метода
insertAdjacentHTML.
Метод имеет два аргумента, первым указывается как вставляется наш кусок кода
afterbegin - в начало элемента
afterend - после элемента
beforebegin - перед элементом
beforeend - в конец элемента
Код
div.insertAdjacentHTML('beforebegin', '<h2>Hello</h2>');
Доступ к элементу не всегда нужно получать через
document, иногда проще это сделать через родительский элемент
Например, есть такая структура:
Код
<div class="wrapper">
<div class="heart"></div>
<div class="heart"></div>
<div class="heart"></div>
</div>
Получаем родительский блок:
Код
const wrapper = document.querySelector(".wrapper");
Получаем дочерние элементы через родителя:
Код
const hearts = wrapper.querySelectorAll(".heart");
Всего комментариев: 0