Modèle d'objet de document simplifié.

Bonjour ? les amis, bienvenue sur mon blog. Aujourd'hui, nous allons simplifier le concept de DOM.

Introduction

Quand j'ai débuté en tant que développeur Web, les gens utilisaient souvent le terme « DOM » dans l'industrie. Chaque tutoriel JavaScript le mentionnait, mais je ne savais pas ce que cela signifiait. Vous recherchez une explication simple du DOM, le résultat de mon exploration confondu avec des termes de programmation avancés. Ayant maintenant compris après une longue recherche, j'ai pensé qu'il était sage d'aider les autres dans ma situation précédente avec une explication plus simple.

Explication

Lorsque vous avez entendu parler pour la première fois du terme DOM, qu'est-ce qui vous est venu à l'esprit en premier ?

1. Documents

2. Objet

3. Modèles
   
   Que signifient-ils ?

---

Qu'est-ce qu'un document :

Les documents Web sont généralement définis comme un simple fichier HTML. Un document Web, tel que cette page, est généralement composé de plusieurs fichiers et est accessible via une URL (Uniform Resource Locator). Le fichier HTML lui-même contient la plupart du temps des feuilles de style, des images d'arrière-plan, d'autres graphiques, des programmes Java et d'autres fichiers.

Le document est votre fichier HTML.

Le document est envoyé au navigateur lorsqu'il est chargé sous forme d'objet."Objet ??"

Qu'est-ce qu'un objet :

Un objet est un terme que l'on entend souvent en programmation, avoir une bonne compréhension d'un objet est un bon début en javascript.

Un objet en JavaScript peut être défini comme une collection non ordonnée de données associées, de types primitifs ou de référence, sous la forme de paires « clé : valeur ». Ces clés peuvent être des variables ou des fonctions et sont appelées respectivement propriétés et méthodes dans le contexte d'un objet. Un objet peut être créé avec des crochets {…} avec une liste facultative de propriétés. Une propriété est une paire « clé : valeur », où une clé est une chaîne (également appelée « nom de propriété ») et la valeur peut être n'importe quoi.

let object = {
Key: Value
}

L'objet est représenté graphiquement dans un format arborescent dans lequel tous les éléments sont appelés nœuds, et les nœuds sont regroupés en fonction de la syntaxe HTML, qui a une relation parent-enfant.

<div> <!-- parent element-->
<p><!-- child element to div element-->
<!-- text is also referred to as a node -->
Paragraph text <!-- child element top element-->
</p> 
</div>

Remarque : Étant donné que la grande majorité du code qui utilise le DOM tourne autour de la manipulation de documents HTML, il est courant de désigner les nœuds du DOM comme des éléments, bien qu'à proprement parler, tous les nœuds ne soient pas un élément.

Le lecteur du navigateur le Document possède un objet qui peut être représenté graphiquement sous forme d'arbre. ** Qu'est-ce qu'un modèle alors ??**

Qu'est-ce qu'un modèle :

Regardons cela du point de vue du dictionnaire.

1. Généralement une représentation miniature de quelque chose. Par exemple :- un modèle en plastique du cœur humain 2. Un modèle de quelque chose à fabriquer.Lire la suite

Comprenant la définition du dictionnaire d'un modèle, associons-le à une page Web, il s'agit de la représentation de l'Objet créé par le navigateur dans une belle mise en page où le texte, les couleurs, les images, etc. sont organisés et présentés au spectateur. J'appellerai donc cela le résultat après réception et compilation du document Web.

Conclusion

*regardons les choses de cette façon*

$$ Réception ⇾ Convection ⇾ Présentation $$

Les pages Web suivent ce processus simple chaque fois que la page Web est chargée pour la première fois et également lors de son actualisation.

Réception :- il reçoit le document soit d'un serveur, soit de notre machine locale et

Convection :- lecteurs du document et convertissent chaque élément en nœuds

Présentation : - représente l'objet ou l'arbre créé dans la page Web conçue pour être affiché aux utilisateurs.

Dans ce cas, lorsqu'une modification est apportée au document, elle n'a aucun effet direct sur le module. Le document est enregistré et le navigateur crée un nouvel objet du document entrant reçu, puis le modèle sera recréé ou modifié.

---

Félicitations

** Wow, quel voyage, je suis contente que vous soyez arrivé à la fin de cet article.**

---

Récapitulatif et commentaires ?

Merci d'avoir pris le temps de lire cet article ! J'espère que cela vous a aidé à simplifier le sujet et à vous fournir des informations précieuses. Si vous l'avez trouvé utile, pensez à me suivre pour un contenu plus facile à digérer sur le développement Web et d'autres sujets technologiques.

Vos commentaires comptent ! Partagez vos réflexions dans la section commentaires, qu'il s'agisse de suggestions, de questions ou de domaines que vous aimeriez que j'améliore. N'hésitez pas à utiliser les emojis de réaction pour me faire savoir ce que cet article vous a fait ressentir. ?

---

Rester connecté ?

Ce n'est que le début de mon parcours de blogueur, et j'aimerais entrer en contact avec vous ! Partageons des idées, grandissons et apprenons ensemble.

Suivez-moi et restons en contact :

• Gazouillement
• LinkedIn

Au plaisir d'avoir de vos nouvelles et de faire grandir cette communauté d'esprits curieux ! ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!