Изучите основы интерактивности DOM и веб-страниц с помощью JavaScript.
DOM (объектная модель документа) позволяет читать и изменять HTML-документы с помощью JavaScript. В этой статье мы увидим, как выполнять основные операции DOM с помощью JavaScript.
Начнем с того, что такое DOM.
Что такое ДОМ
Согласно документам MDN,
Объектная модель документа (DOM) — это программный интерфейс для веб-документов. Он представляет страницу, чтобы программы могли изменять структуру, стиль и содержимое документа.
DOM представляет документ в виде узлов и объектов; таким образом, языки программирования могут взаимодействовать со страницей. Мы также можем получить доступ к этим объектам, используя другие языки, такие как python.
DOM не является частью языка JavaScript, а представляет собой веб-API, используемый для создания веб-сайтов.
Теперь, когда мы знаем, что такое DOM, давайте посмотрим, как мы можем взаимодействовать с ним с помощью JavaScript.
1. Выберите элементы HTML
Существует несколько способов выбора/доступа к элементу HTML с помощью JavaScript.
Мы можем выбрать элемент HTML на основе его идентификатора.
const element = document.getElementById(‘id’)
Мы можем выбрать элемент на основе его класса.
const elements = document.getElementsByClassName(‘class')
Это выбирает все элементы с заданным именем класса.
Мы также можем выбирать элементы с помощью селекторов CSS с помощью querySelector().
const element = document.querySelector(‘selector’)
Это выбирает первый элемент, который соответствует селектору.
Мы также можем выбирать по id(‘#id’) и имени класса(‘.class’), используя querySelector.
const elements = querySelectorAll(‘selector’)
Это выбирает все элементы, которые соответствуют данному селектору CSS.
2. Создайте элемент HTML
Мы можем создать новый элемент HTML, используя JavaScript с createElement().
const p = document.createElement(‘p’)
Это создает элемент абзаца.
Мы также можем установить идентификатор и классы с помощью
p.id = id p.classList.add(‘class’)
Чтобы написать текст между элементом абзаца,
p.innerText = ‘This is an example’
3. Добавьте созданный HTML-элемент
Хотя мы можем создавать HTML-элементы в JavaScript, они не будут автоматически отражаться в HTML-документе. Чтобы добавить их в документ HTML, мы можем сделать
document.body.append(p)
or
document.body.appendChild(p)
Разница между ними заключается в том, что append() может добавлять несколько элементов одновременно, а appendChild() может добавлять только один элемент.
Мы можем добавлять элементы к тегам, таким как div, section и т. д., используя аналогичный метод.
4. Атрибуты
Мы можем читать и добавлять атрибуты к элементам HTML, используя getAttribute() и setAttribute().
const img = document.querySelector(‘img’) img.getAttribute(‘src’)
Это прочитает атрибут src в теге img.
const img = document.querySelector(‘img’) img.setAttribute(‘width’, “300”)
Это установит для атрибута width тега img значение 300.
Мы также можем получить доступ к этим атрибутам без использования getAttribute() и setAttribute(). Просто img.src и img.width = ‘300’ будут работать так же, как и выше.
5. Атрибуты данных
Иногда нам нужно установить некоторые пользовательские атрибуты для элементов. Атрибуты данных являются такими атрибутами. Атрибуты с синтаксисом data-* считаются атрибутами данных и легко доступны в JavaScript.
<article id="electric-cars" data-columns="3" data-index-number="12314" data-parent="cars"> ... </article>
Чтобы прочитать эти атрибуты, мы можем сделать
const article = document.querySelector(‘article’) article.dataset.parent // returns ‘cars’ article.dataset.indexNumber // returns ‘12314’
Чтобы установить атрибуты данных,
article.dataset.colorName = ‘red’
Это приведет к тому,
<article Id="electric-cars" data-columns="3" data-index-number="12314" data-parent="cars" data-color-name = “red” > ... </article>
6. Стили
Мы можем изменить стили элемента с помощью JavaScript, используя style.propertyName.
const p = document.querySelector(‘p’) p.style.color = ‘red’
Это изменяет цвет текста внутри тега p на красный.
Имена свойств CSS написаны в верблюжьем регистре, поэтому background-color станет backgroundColor и так далее. И значения всегда являются строками.
7. Прослушиватель событий
Мы можем добавлять события в элементы HTML, используя javaScript с addEventListener() .
const button = document.querySelector(‘button’)
button.addEventListener(‘click’, () => {
// do something
})
Это добавляет событие щелчка на кнопку, и когда кнопка нажата, он выполняет код внутри функции обратного вызова.
Если мы хотим добавить глобальные предопределенные события, такие как щелчок, наведение и т. д., нам не нужно использовать addEventListener(). Мы можем просто сделать
button.onclick = () => {
// do something
}
и это будет работать так же, как и при использовании addEventListener().
8. Удалить элемент HTML
Для этого мы можем использовать remove() и removeChild().
const p = document.querySelector(‘p’) p.remove()
Это удалит тег p из HTML-документа.
const p = document.querySelector(‘p’) document.removeChild(p)
Это также удаляет тег p из HTML-документа.
Разница в обоих методах заключается в том, что в методе removeChild() нам нужна ссылка удаляемого элемента и ссылка родительского элемента. Но в случае с remove() нам нужна только ссылка на удаляемый элемент.
С DOM можно делать гораздо больше, и мы обсудим их в следующей статье.
А пока продолжайте учиться!
