Comprendre le modèle DOM (Document Object Model) en détail

Nous avons tous entendu parler de la DOM, ou Modèle d'objet de document, cela est mentionné de temps en temps, lié à JavaScript. DOM est un concept très important dans le développement Web. Sans cela, nous ne pourrions pas modifier dynamiquement les pages HTML dans le navigateur.

L’apprentissage et la compréhension des résultats DOM permettent de mieux accéder, changer et surveiller différents éléments d'une page HTML. Le modèle d'objet de document peut également nous aider réduire les augmentations inutiles du temps d'exécution du script.

Arbres de structure de données

Avant de parler de ce qu'est le DOM, de sa naissance, de son existence et de ce qui se passe à l'intérieur, je veux que vous sachiez à propos des arbres. Pas le genre conifère & feuillus mais sur le arborescence de la structure de données.

Il est beaucoup plus facile de comprendre le concept de structures de données si nous simplifions sa définition. Je dirais, une structure de données est d'environ organiser vos données. Oui, tout simplement vieux arrangement, comme vous organiseriez les meubles dans votre maison ou des livres dans une bibliothèque ou tous les différents groupes d'aliments que vous rencontrez pour un repas dans votre assiette afin de donne du sens à toi.

Bien sûr, ce n’est pas tout ce qu’il ya dans une structure de données, mais c’est à peu près tout où tout commence. Ce “arrangement” est au cœur de tout. C'est également très important dans les DOM. Mais nous ne parlons pas encore de DOM, alors laissez-moi vous guider vers un structure de données que vous connaissez peut-être: tableaux.

Tableaux et arbres

Les tableaux ont des indices et longueur, ils peuvent être multidimensionnel, et ont beaucoup plus de caractéristiques. Bien qu’il soit important de savoir ces choses sur les tableaux, ne nous en occupons pas pour le moment. Pour nous, un tableau est assez simple. C'est quand tu organiser différentes choses en ligne.

De même, quand on pense aux arbres, disons, il s’agit de mettre les choses les unes en dessous des autres, en commençant avec une seule chose en haut.

Maintenant, vous pourriez prendre les canards à une ligne d'avant, le redresser, et dis moi ça “maintenant, chaque canard est sous un autre canard”. Est-ce un arbre alors? Il est.

En fonction de la nature de vos données et de la manière dont vous les utiliserez, les données les plus hautes de votre arborescence (appelées racine) pourrait être quelque chose qui est d'une grande importance ou quelque chose qui est seulement là pour enfermer d'autres éléments en dessous.

Quoi qu'il en soit, l'élément le plus haut dans une structure de données arborescente fait quelque chose de très important. Il fournit un endroit pour commencer à rechercher toute information que nous voulons extraire de l'arbre.

Le sens de DOM

DOM signifie Modèle d'objet de document. Le document pointe vers un document HTML (XML) lequel est représenté sous forme d'objet. (En JavaScript, tout ne peut jamais être représenté que par un objet!)

Le modèle est créé par le navigateur cela prend un document HTML et crée un objet qui le représente. Nous pouvons accéder à cet objet avec JavaScript. Et puisque nous utilisons cet objet pour manipuler le document HTML et construire nos propres applications, DOM est fondamentalement un API.

L'arbre DOM

En code JavaScript, le document HTML est représenté sous forme d'objet. Toutes les données lues dans ce document sont également enregistré en tant qu'objets, imbriqués les uns dans les autres (car, comme je l'ai déjà dit, en JavaScript, tout ne peut jamais être représenté que par des objets).

Donc, c’est fondamentalement la disposition physique des données DOM dans le code: tout est disposés comme des objets. Logiquement, cependant, c'est un arbre.

Le DOM Parser

Chaque logiciel de navigation possède un programme appelé DOM Parser qui est responsable de analyser un document HTML dans DOM.

Les navigateurs lisent une page HTML et transforment ses données en objets constituant le DOM. Les informations présentes dans ces objets DOM JavaScript sont logiquement organisées sous forme d'arborescence de structure de données appelée arborescence DOM..

Analyse des données de HTML vers l'arborescence DOM

Prenons un simple fichier HTML. Il a la élément racine . Ses sous-éléments sont et , chacun a de nombreux éléments enfants qui leur sont propres.

Donc, essentiellement, le navigateur lit les données dans le document HTML, quelque chose de semblable à ceci:

Et, les arrange dans un arbre DOM comme ça:

La représentation de chaque élément HTML (et de son contenu d’appartenance) dans l’arbre DOM est appelée Nœud. le Noeud principal est le noeud de .

le Interface DOM en JavaScript s'appelle document (puisqu'il s'agit de la représentation du document HTML). Ainsi, on accède à l’arborescence DOM d’un document HTML à travers le document interface en JavaScript.

Nous ne pouvons pas seulement accéder, mais aussi manipuler le document HTML à travers le DOM. Nous pouvons ajouter des éléments à une page Web, les supprimer et les mettre à jour. Chaque fois que nous changeons ou mettons à jour des nœuds de l’arbre DOM, réfléchit sur la page web.

Comment les nœuds sont conçus

J'ai déjà mentionné que chaque donnée d'un document HTML est enregistré en tant qu'objet en JavaScript. Alors, comment les données sauvegardées en tant qu’objet peuvent être logiquement organisées sous forme d’arbre?

Les nœuds d'un arbre DOM ont certaines caractéristiques ou propriétés. Presque tous les nœuds d'un arbre a un noeud parent (le nœud juste au dessus), nœuds enfants (les noeuds en dessous) et frères et soeurs (autres nœuds appartenant au même parent). Ayant cela famille ci-dessus, ci-dessous et autour d'un nœud est ce qui le qualifie de partie d'un arbre.

Cette information de famille de chaque noeud est enregistré en tant que propriétés dans l'objet représentant ce nœud. Par exemple, les enfants est une propriété d'un nœud qui contient une liste des éléments enfants de ce nœud, organisant ainsi logiquement ses éléments sous le nœud.

Eviter de trop manipuler le DOM

Même s’il est utile de mettre à jour le DOM (pour modifier une page Web), il existe des fonctions telles que en faire trop.

Dites, vous voulez mettre à jour la couleur d'un