Элемент

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

Кратко

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

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

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

Как пишется

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

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

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

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

        
        
          
        
      

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

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

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

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

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

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

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

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

  • id — получить идентификатор элемента
  • className — список классов в HTML-атрибуте class
        
          
          let element = document.getElementsByTagName("div")[0]console.log(element.className) // напечатать список классов в консольelement.className = "hacked" // установить свой класс
          let element = document.getElementsByTagName("div")[0]
console.log(element.className) // напечатать список классов в консоль
element.className = "hacked" // установить свой класс

        
        
          
        
      
  • style — добавить стили. Стили добавляются так же с помощью свойств. Свойства обычно пишутся по аналогии с CSS-стилями:
        
          
          let element = document.getElementsByTagName("div")[0]element.style.backgroundColor = "beige" // CSS-свойство background-colorelement.style.color = "gray" // CSS-свойство colorelement.style.marginTop = "20px" // CSS-свойство margin-top
          let element = document.getElementsByTagName("div")[0]

element.style.backgroundColor = "beige" // CSS-свойство background-color
element.style.color = "gray" // CSS-свойство color
element.style.marginTop = "20px" // CSS-свойство margin-top

        
        
          
        
      

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

Секция статьи "💡 Свойства и методы, связанные с DOM"
  • children — список дочерних элементов;
  • parentElement — получить родительский элемент;
  • nextElementSibling и previousElementSibling — получить следующий/предыдущий узел-сосед:
Открыть демо в новой вкладке
  • getElementsByClassName — поиск среди дочерних элементов по названию класса;
  • getElementsByTagName — поиск среди дочерних элементов по названию тега;
  • querySelector — поиск первого дочернего элемента, подходящего под CSS-селектор;
  • querySelectorAll — поиск всех дочерних элементов подходящих под CSS-селектор;

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

💡 Свойства с информацией о содержимом

Секция статьи "💡 Свойства с информацией о содержимом"
  • innerHTML — это свойство возвращает HTML-код всего, что вложено в текущий элемент. При записи в это свойство, предыдущее содержимое будет затёрто. Страница отобразит новое содержимое:
        
          
          let divElement = document.getElementsByTagName("div")[0]divElement.innerHTML = "<p>I was added from JavaScript</p>" // после выполнения этого кода, на странице отобразится параграф с указанным текстом
          let divElement = document.getElementsByTagName("div")[0]
divElement.innerHTML = "<p>I was added from JavaScript</p>" // после выполнения этого кода, на странице отобразится параграф с указанным текстом

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

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

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

На практике

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

Николай Лопин

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

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

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

  • добавить класс add
  • удалить класс remove
        
          
          let element = document.getElementsByTagName("div")[0]element.className.add("hello")element.className.remove("bye")
          let element = document.getElementsByTagName("div")[0]
element.className.add("hello")
element.className.remove("bye")

        
        
          
        
      

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

        
          
          let element = document.getElementsByTagName("div")[0]console.log(element.dataset.columns) // получить значение атрибута data-columns тега divelement.dataset.columns = 99 // изменить значение
          let element = document.getElementsByTagName("div")[0]
console.log(element.dataset.columns) // получить значение атрибута data-columns тега div
element.dataset.columns = 99 // изменить значение

        
        
          
        
      

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

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

        
          
          let element = document.querySelector("#some-element") // <-- удаляемый элементelement.remove()
          let element = document.querySelector("#some-element") // <-- удаляемый элемент
element.remove()