Управление объектами документа с помощью JavaScript
DOM означает объектную модель документа. Это программный интерфейс, который позволяет нам создавать, изменять или удалять элементы из документа веб-сайта. Манипулирование DOM — это использование JavaScript для добавления, удаления и изменения элементов веб-сайта. Возможность манипулировать DOM — одна из уникальных возможностей JavaScript. DOM можно понимать как дерево узлов, созданное браузером.
Ниже приведено изображение, дающее визуальное представление о DOM и о том, как он работает.
Чтобы выполнить любую форму манипуляции, вы должны сначала получить доступ к документу. После этого находится корневой элемент HTML, который является дочерним элементом объекта документа.
Следующими в строке идут head и body, которые являются дочерними элементами HTML-элемента и родственными элементами.
Под элементами head и body у нас есть собственные дочерние элементы, title для элемента head и теги p и ul для элемента body.
Здесь мы должны понимать, что прежде чем мы сможем получить доступ к любому дочернему элементу и выполнить над ним какие-либо манипуляции с DOM, мы должны сначала получить доступ к объекту документа (это делается с помощью документа, «дочернего элемента»).
Доступ к элементам
Прежде чем вы сможете манипулировать каким-либо элементом в DOM, вы должны сначала выбрать этот элемент. Существуют различные способы выбора этих элементов, и они упомянуты ниже;
Получение элементов по их идентификатору, классу или имени тега. Для выбора элементов на странице можно использовать такие функции, как getElementById, getElementsByClassName и getElementsByTagName. Например:
Также есть другие методы выбора или функции, которые могут пригодиться в определенной ситуации. Это методы querySelector и querySelectorAll.
Разница между ними заключается в том, что querySelector возвращает первый элемент (HTML), который соответствует «селекторам». С другой стороны, querySelectorAll возвращает массив объектов со всеми элементами, которые соответствуют «селекторам».
Изменение элементов
Получив доступ к элементу, вы можете изменить его содержимое, атрибуты или стиль. Например; изменение содержимого элемента, стилизация элемента, изменение его атрибутов и многое другое.
Пример кода здесь:
Добавление и удаление элемента
Вы можете использовать JavaScript для добавления новых элементов в DOM или удаления существующих элементов. Например:
Обход DOM
Вы можете использовать JavaScript для навигации по дереву DOM и доступа к родительским, дочерним и одноуровневым элементам любого элемента. Например:
В этой статье были рассмотрены только некоторые вещи, которые вы можете делать с DOM и в нем, особенно основы. Вы можете проверить Mozilla Developer Network, чтобы узнать больше о других вещах, которые вы можете делать с DOM.
Пожалуйста, я хотел бы знать, что вы думаете о статье, если есть какие-либо грамматические или технические ошибки, попробуйте сказать об этом в разделе комментариев. Буду признателен, так как это поможет мне стать лучше.
Спасибо, что дочитали до этого места.
