/ ↲
    Расширенный поиск

    JavaScript

    Element

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

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

    Кратко

    Скопировано

    Элемент — это кусочек 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-атрибутами

    Скопировано

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

    Скопировано
    • 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()

    Читайте также