Element

Элемент — это кусочек HTML в DOM-дереве. Браузер создаёт DOM для взаимодействия между JavaScript и HTML. Каждый HTML-тег при этом превращается в элемент DOM. Ещё такие элементы называют узлами.

Из DOM можно получить элемент и изменить его. Браузер заметит изменения и отобразит их на странице.

Например, можно поменять выравнивание у элемента h1:

        
          
          // Получаем элемент из DOMconst element = document.getElementsByTagName('h1')[0]// После выполнения этого кода h1 выравнивает текст по центруelement.align = 'center'// Меняем цвет шрифта на красныйelement.style.color = 'red'
          // Получаем элемент из DOM
const element = document.getElementsByTagName('h1')[0]

// После выполнения этого кода h1 выравнивает текст по центру
element.align = 'center'

// Меняем цвет шрифта на красный
element.style.color = 'red'

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

HTML-элементы содержат свойства, которые можно разделить на группы:

• свойства, связанные с HTML-атрибутами: ID, классы, стили и так далее;
• свойства и методы связанные с обходом DOM: получение дочерних элементов, родителя, соседей;
• информация о содержимом;
• обработка событий;
• специфические свойства элемента.

Первые три группы свойств есть у всех элементов. Специфические свойства отличаются в зависимости от типа элемента. Например, у полей ввода есть свойства, которых нет у параграфов и блоков: value, type и другие.

Читать и записывать значения HTML-атрибутов можно при помощи свойств элемента. Название обычно совпадает с названием атрибута.

id — получить идентификатор элемента.

className — список классов в HTML-атрибуте class.

        
          
          const element = document.getElementsByTagName('div')[0]// Напечатать список классов в консольconsole.log(element.className)// Установить свой классelement.className = 'hacked'
          const element = document.getElementsByTagName('div')[0]

// Напечатать список классов в консоль
console.log(element.className)

// Установить свой класс
element.className = 'hacked'

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

style — добавить стили. Стили добавляются так же с помощью свойств. Свойства именуются по аналогии с CSS-свойствами:

        
          
          const element = document.getElementsByTagName('div')[0]// CSS-свойство background-colorelement.style.backgroundColor = 'beige'// CSS-свойство colorelement.style.color = 'gray'// CSS-свойство margin-topelement.style.marginTop = '20px'
          const element = document.getElementsByTagName('div')[0]

// CSS-свойство background-color
element.style.backgroundColor = 'beige'

// CSS-свойство color
element.style.color = 'gray'

// CSS-свойство margin-top
element.style.marginTop = '20px'

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

• children — список дочерних элементов;
• parentElement — получить родительский элемент;
• nextElementSibling и previousElementSibling — получить следующий или предыдущий узел-сосед.

• getElementsByClassName() — поиск среди дочерних элементов по названию класса;
• getElementsByTagName() — поиск среди дочерних элементов по названию тега;
• querySelector() — поиск первого дочернего элемента, подходящего под CSS-селектор;
• querySelectorAll() — поиск всех дочерних элементов подходящих под CSS-селектор;

С помощью этих свойств и методов можно перемещаться по дереву и даже обойти все его элементы, если это нужно.

innerHTML — это свойство возвращает HTML-код всего, что вложено в текущий элемент. При записи в это свойство, предыдущее содержимое будет затёрто. Страница отобразит новое содержимое:

        
          
          const divElement = document.getElementsByTagName('div')[0]divElement.innerHTML = '<p>Добавлен из кода</p>'// После выполнения этого кода, на странице// отобразится параграф с указанным текстом
          const divElement = document.getElementsByTagName('div')[0]
divElement.innerHTML = '<p>Добавлен из кода</p>'
// После выполнения этого кода, на странице
// отобразится параграф с указанным текстом

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

outerHTML — это свойство возвращает HTML-код текущего элемента и всего, что в него вложено. При записи в это свойство, предыдущее содержимое будет затёрто.
textContent — свойство, возвращает текст всех вложенных узлов без HTML-тегов.

Почувствуй разницу на демо:

Элемент может взаимодействовать с браузерными событиями. Для того, чтобы это происходило, нужно указать обработчик событий. Сделать это можно разными способами.

Современный способ обработки событий - это addEventListener.

        
          
          element.addEventListener('click', (event) => {  console.log('Клик по элементу')})
          element.addEventListener('click', (event) => {
  console.log('Клик по элементу')
})

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Преимущества этого способа:

• поддержка добавления множества обработчиков одного и того же события на элементе (разные модули могут независимо обрабатывать событие);
• позволяет перехватывать события и в фазе всплытия, и в фазе погружения;
• есть опция однократного срабатывания, после которого обработчик сам удаляется;
• есть возможность начать выполнять действие по умолчанию не дожидаясь завершения обработчика;
• поддержка пользовательских событий (CustomEvent).

Недостатки этого способа:

• более многословный синтаксис;
• нельзя посмотреть какие обработчики уже висят на элементе.

Это свойства DOM-элементов, которые начинаются с приставки on (onclick, onchange, onsubmit и т. п.). В значении пишется JavaScript-код, который выполнится при наступлении события. Сейчас этот способ считается устаревшим, мы не рекомендуем его использовать.

        
          
          element.onclick = (event) => {  console.log('Клик по элементу')}
          element.onclick = (event) => {
  console.log('Клик по элементу')
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Преимущества этого способа:

• один обработчик: последний присвоенный перезаписывает предыдущие;
• удобное удаление: достаточно присвоить null;
• поддержка в старых браузерах (Internet Explorer 8 и ниже).

Недостатки этого способа:

• нельзя использовать несколько обработчиков одного события на элементе;
• работает только на фазе всплытия, нельзя перехватить событие на фазе погружения;
• риск утечек памяти: не все браузеры удаляют обработчик при удалении элемента;
• если нужно однократное срабатывание события, обработчик нужно удалить вручную после срабатывания.

        
          
          const element = document.getElementsByTagName('div')[0]element.classList.add('hello')element.classList.remove('bye')
          const element = document.getElementsByTagName('div')[0]
element.classList.add('hello')
element.classList.remove('bye')

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          const element = document.getElementsByTagName('div')[0]// Получить значение атрибута data-columns тега <div>console.log(element.dataset.columns)// Изменить значениеelement.dataset.columns = 99
          const element = document.getElementsByTagName('div')[0]

// Получить значение атрибута data-columns тега <div>
console.log(element.dataset.columns)

// Изменить значение
element.dataset.columns = 99

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          const element = document.querySelector('#some-element')element.remove()
          const element = document.querySelector('#some-element')
element.remove()

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать