Element

Теги HTML превращаются в элементы JavaScript, чтобы их можно было потрогать из кода.

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

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

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

Как пишется

Секция статьи "Как пишется"

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

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

// после выполнения этого кода h1 будет выравнивать текст по центру
element.align = 'center'
// меняем цвет шрифта на красный
element.style.color = 'red'

        
        
          
        
      

Как это понять

Секция статьи "Как это понять"

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

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

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

💡 Свойства, связанные с HTML-атрибутами

Секция статьи "💡 Свойства, связанные с HTML-атрибутами"

Читать и записывать значения 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'

        
        
          
        
      

💡 Свойства и методы, связанные с DOM

Секция статьи "💡 Свойства и методы, связанные с DOM"
  • 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-тегов.

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

Открыть демо в новой вкладке

На практике

Секция статьи "На практике"

Николай Лопин советует

Секция статьи "Николай Лопин советует"

🛠 Если нужно добавить текст в элемент, то всегда используйте свойство textContent. Другие свойства обрабатывают HTML, это может привести к дырам в безопасности.

🛠 Для работы с классами элемента есть удобные методы, доступные через свойство classList:

  • добавить класс — метод add().
  • удалить класс — метод remove().
        
          
          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')

        
        
          
        
      

🛠 В HTML часто используют data-атрибуты. Они используются, когда нужно передать данные через HTML. Например, когда сервер собирает стартовый HTML, он может поместить значения в data-атрибуты. Фронтендер затем может использовать их, вместо того, чтобы отправлять запрос на сервер. Название таких атрибутов начинаются с префикса data-. Для доступа к ним из JavaScript используется свойство dataset:

        
          
          const element = document.getElementsByTagName('div')[0]// получить значение атрибута data-columns тега divconsole.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

        
        
          
        
      

🛠 У элементов очень много свойств. Если нужно что-то получить из элемента, то скорее всего уже есть свойство, которое хранит эти данные.

🛠 Если нужно удалить элемент и все вложенные в него, воспользуйтесь методом remove():

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