Привет, народ!! Говоря о DOM..., начальной концепции веб-разработки! Начнем с того, что многим из нас может показаться, что WTF это DOM?, Не беспокойтесь, я помогу вам избавиться от этого 😉

Приступаем 🎉

Содержание
1. Что такое DOM?
2. Почему DOM?
3. Обтекание

1. Что такое ДОМ?

Когда HTML-документ загружается в браузер, весь документ представляется в виде DOM. Это обычный интерфейс программирования html или xml, отображаемый веб-браузером для динамического управления с использованием языка программирования, такого как javascript.

Чтобы получить доступ к любому элементу html, такому как div, section и т. д., мы используем объект JavaScript, известный как document.

Пример

<!DOCTYPE html>
<html lang=”en”>
<head><title>My title</title>
</head>
<body>
 <h1>A heading</h1>
 <a href=”www.shan-tech.githib.io">Link text</a>
</body>
</html>

Таким образом, структура DOM для приведенного выше html будет следующей:

2. Почему ДОМ?

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

Он следует древовидной структуре, упомянутой выше в формате элемента и ниже в качестве формата древовидной структуры данных.

3. Как манипулировать этими элементами!

Да, ребята, я вас услышал! Вы можете спросить, как манипулировать, изменять или достигать динамики.

Это можно сделать с помощью языка сценариев JavaScript или JQuery в зависимости от ваших предпочтений. Но в конце концов, оба почти похожи.

Давайте посмотрим на пример с обоими. Ниже приведен HTML-шаблон с пустым тегом абзаца.

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
</body>
</html>
  1. Приведенный ниже скрипт добавляет некоторый текст к элементу абзаца «demo» с помощью Javascript.
<script>
document.getElementById("demo").innerHTML = "Hello World";
</script>

Здесь в javascript мы используем метод «getElementById()», чтобы выбрать выбранный элемент.

2. Приведенный ниже скрипт добавляет некоторый текст к элементу абзаца «demo» с помощью JQuery.

$(document).ready(function(){
    $("demo").text("Hello world!");
});

Здесь, в JQuery, метод ready используется для выполнения скрипта только после загрузки страницы. getElementById заменяется на $(), а text() используется для добавления нового текста внутри выбранного элемента.

Хорошо, народ, надеюсь, это помогло !, свяжитесь со мной📧, если возникнут вопросы, спасибо за чтение! Следите за обновлениями!! Увидимся👋.