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