Каковы основные функции HTML DOM?

DOM или объектная модель документа — это API (интерфейс прикладного программирования), который представляет HTML-документ в форме древовидной структуры, чтобы программы могли получать доступ и изменять стиль и структуру HTML-документа. Объект DOM автоматически создается самим веб-браузером при открытии веб-страницы HTML.

HTML DOM состоит из трех частей :

Документ: это HTML-документ, который мы создаем.
Объект: все элементы и атрибуты, присутствующие в документе HTML, относятся к объектам (например: <h1> <p> <img> и т. д.).
Модель: древовидная структура элементов называется моделью.

Структурное представление HTML DOM:

HTML-код: рассмотрим простой HTML-код следующим образом.

HTML

<!DOCTYPE html>

<html>

<head>

    <title>Page Title</title>

</head>

<body>

    <h2>Welcome To GFG</h2>

    <p>Default code has been loaded into the Editor.</p>

</body>

</html>

HTML DOM, созданный при открытии этой веб-страницы веб-браузером, выглядит следующим образом:

Основные функции HTML DOM

Функции HTML DOM следующие:

DOM API можно использовать для доступа и изменения данных, представленных в HTML-документе, с помощью языка JavaScript. С помощью DOM API мы можем манипулировать следующими элементами: HTML-элементами, атрибутами и данными, присутствующими между тегами и стилями CSS.
DOM позволяет программистам создавать веб-страницы, использующие динамический HTML, т.е. веб-сайты, которые обновляются без обновления веб-сайта.
Это также позволяет программистам разрабатывать веб-страницы или веб -сайты, которые настраиваются пользователем,т.е. пользователь может сам редактировать HTML-элементы на лету. (Например: изменение цвета веб-страницы или кнопки)
Он функционирует как мост, который делает веб-страницу динамической с помощью языка JavaScript.
Следовательно, чтобы сделать веб-сайт более интерактивным и динамичным, DOM предоставляет различные методы доступа к элементам и атрибутам с помощью JavaScript. Некоторые из доступных методов следующие

- getElementById() : этот метод используется для доступа к элементу, присутствующему в html-документе, с использованием его уникального идентификатора.
- innerHTML: используется для изменения содержимого между элементами.
- addEventListener() : этот метод используется для получения объекта события, если событие инициировано (например, щелчок мышью).
- appendChild() : этот метод используется для добавления элемента в документ.

Давайте посмотрим на пример HTML DOM: в приведенном ниже HTML-коде мы получаем данные, указанные в элементе области ввода текста, с помощью document.getElementById().value и изменяем текст с помощью document.write(). Следовательно, это основные функции HTML DOM, которые помогают в доступе и изменении данных, представленных в HTML.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content=

        "width=device-width, initial-scale=1.0">

</head>

<body>

    <h1 style="color: green; text-align: center;">

        GeeksforGeeks

    </h1>

    <form>

        <div class="wrapper" style="text-align: center;">

            Enter your name:

            <input type="text" id="t1" />

            <br><br>

            <input type="submit"

                style="position: absolute;"

                onclick="func()" />

        </div>

    </form>



    <script>

        function func() {

            var name = document.getElementById("t1").value;

            document.write("Hello" + name +

                ",this text is printed using HTML DOM ");

        }

    </script>

</body>

</html>