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

Шпаргалка по HTML Программирование и разработка

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

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

  • DOM API можно использовать для доступа и изменения данных, представленных в HTML-документе, с помощью языка JavaScript. С помощью DOM API мы можем манипулировать следующими элементами:   HTML-элементами, атрибутами и данными, присутствующими между тегами и стилями CSS.
  • DOM позволяет программистам создавать веб-страницы, использующие динамический HTML, т.е. веб-сайты, которые обновляются без обновления веб-сайта.
  • Это также позволяет программистам разрабатывать веб-страницы или веб -сайты, которые настраиваются пользователем,т.е. пользователь может сам редактировать HTML-элементы на лету. (Например: изменение цвета веб-страницы или кнопки)
  • Он функционирует как мост, который делает веб-страницу динамической с помощью языка JavaScript.
  • Следовательно, чтобы сделать веб-сайт более интерактивным и динамичным, DOM предоставляет различные методы доступа к элементам и атрибутам с помощью JavaScript. Некоторые из доступных методов следующие
    • getElementById() : этот метод используется для доступа к элементу, присутствующему в html-документе, с использованием его уникального идентификатора.
    • innerHTML: используется для изменения содержимого между элементами.
    • addEventListener() : этот метод используется для получения объекта события, если событие инициировано (например, щелчок мышью).
    • appendChild() : этот метод используется для добавления элемента в документ.
Читайте также:  Как создать собственную библиотеку Arduino с помощью C++?

Давайте посмотрим на пример 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>
Оцените статью
bestprogrammer.ru
Добавить комментарий