Что такое DOM

#description

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

DOM API дает возможность получать доступ к объектам на странице и изменять их свойства и содержимое. Запросы элементов DOM могут быть выполнены с помощью методов, таких как getElementById, getElementsByTagName и querySelector, а затем манипулироваться с использованием методов, таких как setAttribute, innerHTML, style и других.

DOM также используется для обработки событий на странице, таких как клики мыши, отправка форм и нажатия клавиш. Как только событие происходит, браузер создает новый объект события и передает его в соответствующий обработчик, который затем выполняет определенное действие на странице.

Успешное программирование на JavaScript невозможно без понимания DOM, поскольку это является ключевым компонентом для манипулирования содержимым на веб-страницах.

March 25, 2023

#example

DOM (Document Object Model) - это объектная модель документа, которая отображает структуру HTML-документа и позволяет программным средствам взаимодействовать с каждым элементом страницы.

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

Получение элемента по ID:

                    
let element = document.getElementById("myDiv");

Получение элементов по тегу:

                    
let elements = document.getElementsByTagName("p");

Получение элементов по классу:

                    
let elements = document.getElementsByClassName("myClass");

Изменение содержимого элемента:

                    
let element = document.getElementById("myDiv");
element.innerHTML = "Some new text";

Изменение атрибутов элемента:

                    
let element = document.getElementById("myImage");
element.src = "newimage.png";

Добавление нового элемента:

                    
let list = document.getElementById("myList");
let newElement = document.createElement("li");
let textNode = document.createTextNode("Some text");
newElement.appendChild(textNode);
list.appendChild(newElement);

Удаление элемента:

                    
let element = document.getElementById("myDiv");
element.parentNode.removeChild(element);

March 28, 2023

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

Если же непонятен весь вопрос, то нажмите на кнопки внизу, чтобы получить новый вариант объяснения, практические примеры или критически оценить сам вопрос.

Developer learning path

Что такое DOM в JavaScript

Что такое DOM