логотип PurpleSchool

Element в JavaScript

Автор

Дмитрий Фандорин

Element - это объект JavaScript, который представляет HTML-элемент на веб-странице. Веб-страницы состоят из HTML-элементов, которые можно создавать, изменять и удалять с помощью JavaScript. Каждый элемент имеет свои свойства и методы, которые позволяют управлять его атрибутами, содержимым и положением на странице.

Форма записи

Для создания элемента в JavaScript используется метод createElement объекта document. Например, чтобы создать элемент div, необходимо использовать следующий код:

const divElement = document.createElement('div');

Здесь создается переменная divElement, которая содержит новый элемент div. После создания элемента, его можно добавить на страницу с помощью метода appendChild другого элемента:

document.body.appendChild(divElement);

Этот код добавляет созданный divElement на страницу в конец тела документа.

Описание работы

Свойства с HTML-атрибутами:

  • id
    • уникальный идентификатор элемента;
  • className
    • класс элемента;
  • style
    • стили элемента.

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

divElement.className = 'my-class';

Свойства и методы с DOM:

  • children
    • дочерние элементы;
  • parentElement
    • родительский элемент;
  • nextElementSibling
    • следующий элемент на том же уровне;
  • previousElementSibling
    • предыдущий элемент на том же уровне;
  • getElementsByClassName()
    • получение элементов по классу;
  • getElementsByTagName()
    • получение элементов по тегу;
  • querySelector()
    • получение первого элемента, соответствующего CSS-селектору;
  • querySelectorAll()
    • получение всех элементов, соответствующих CSS-селектору.

Например, чтобы получить все элементы с классом my-class, можно использовать метод getElementsByClassName:

const elements = document.getElementsByClassName('my-class');

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

  • innerHTML
    • HTML-содержимое элемента;
  • outerHTML
    • HTML-содержимое элемента, включая сам элемент;
  • textContent
    • текстовое содержимое элемента без форматирования.

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

divElement.innerHTML = '<p>Hello, world!</p>';

Заключение

Использование элементов в JavaScript позволяет управлять HTML-элементами на странице, изменять их свойства и методы. Это может быть полезно при создании интерактивных веб-сайтов, например, при добавлении элементов на страницу динамически, при изменении стилей элементов или при работе с содержимым элементов.

изображение курса

Основы JavaScript

Антон Ларичев
иконка часов18 часов лекций
иконка зведочки рейтинга4.8
Frontend
Backend
Mobile
Основы JavaScript