DOM

Материал из Викижурнал
jQuery
DOM
DOM

DOM (Document Object Model) — это программный интерфейс для HTML и XML-документов. Он представляет структуру документа в виде дерева объектов, где каждый элемент документа (например, теги, атрибуты и текст) является узлом этого дерева. DOM позволяет разработчикам взаимодействовать с документом, изменять его структуру, стили и содержание с помощью JavaScript.

Основные характеристики DOM

  • Деревовидная структура: Все элементы в HTML-документе представлены в виде узлов дерева, начиная с корневого элемента (<html>).
  • Объектная модель: Каждый узел дерева представляет собой объект, который можно изменять и манипулировать с помощью JavaScript.
  • Динамическое изменение: С помощью JavaScript можно добавлять, удалять и изменять узлы в DOM, что позволяет динамически обновлять содержимое веб-страницы без перезагрузки.
  • События: DOM позволяет обрабатывать события (например, клики мышью, нажатия клавиш) и реагировать на них, что делает страницы интерактивными.

Пример использования DOM

Вот простой пример, как можно использовать DOM для изменения текста элемента на странице:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM Example</title>
</head>
<body>
    <h1 id="myHeader">Hello, World!</h1>
    <button onclick="changeText()">Change Text</button>

    <script>
        function changeText() {
            // Находим элемент по его ID и изменяем его текст
            document.getElementById("myHeader").innerText = "Text Changed!";
        }
    </script>
</body>
</html>

Ключевые методы работы с DOM

  • getElementById(): находит элемент по его ID.
  • getElementsByClassName(): находит элементы по их классу.
  • getElementsByTagName(): находит элементы по их тегу.
  • querySelector(): находит первый элемент, соответствующий CSS-селектору.
  • createElement(): создает новый элемент.
  • appendChild(): добавляет узел как дочерний к указанному узлу.
  • removeChild(): удаляет узел.

DOM является важной частью веб-разработки, так как он позволяет создавать динамичные и интерактивные веб-страницы.

Другие статьи про jQuery

Источник — https://ru.wikijournal.org/w-wiki/index.php?title=DOM&oldid=12854