Привет, народ!! Говоря о 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>
- Приведенный ниже скрипт добавляет некоторый текст к элементу абзаца «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() используется для добавления нового текста внутри выбранного элемента.
Хорошо, народ, надеюсь, это помогло !, свяжитесь со мной📧, если возникнут вопросы, спасибо за чтение! Следите за обновлениями!! Увидимся👋.