Introduction au DOM

Quelle que soit l'action que nous effectuons sur une page Web HTML comme modifier un élément, modifier les attributs d'un élément ou modifier le style d'un élément à l'aide d'une langue de script, est exécuté à l'aide du DOM. En effet.

DOM peut être appelé la structure du document où le document peut être une page Web HTML ou une page XML. Dans cet article, nous allons savoir ce qu'est DOM, comment travailler avec des téléspectateurs DOM en direct et comment accéder aux éléments avec un langage de script.

Qu'est-ce que DOM?

DOM signifie un modèle d'objet de document et est considéré comme une norme pour accéder, modifier et supprimer les éléments du document. Cette norme est établie par le W3C (World Wide Web Consortium) Et c'est pourquoi Dom est le plus souvent appelé le W3C DOM. Le World Wide Web Consortium a défini DOM comme une interface qui aide les langues à interagir avec un document tout en restant.

Le Document Dans DOM signifie un document qui peut être un document HTML ou un document XML. Le Objet dans DOM est utilisé pour faire référence aux éléments ou aux nœuds du document. Tandis que le Modèle dans le dom fait référence à la structure (ou à l'arbre) du document.

De plus, le DOM agit comme une interface d'application (API) pour que le langage de script modifie les éléments du document HTML

La structure du document est un peu comme un arbre. Il contient le nœud parent et les nœuds enfants.

Travailler avec des téléspectateurs DOM en direct

Certains sites Web nous fournissent des générateurs DOM en direct, l'un de ces téléspectateurs DOM en direct est fourni sur Codepen.Io. Considérez les éléments suivants à l'intérieur de la page Web HTML:

Google	Bing
John Doe, Ruski	Californie

Pour générer la hiérarchie DOM à l'aide du code JavaScript sur le code du code, copiez et collez ces éléments HTML à l'intérieur de la visionneuse DOM sur Codepen.Io

Sous cet onglet HTML sur «Codepen», Vous pourrez voir la hiérarchie DOM comme:

Vous pouvez clairement voir les nœuds parents, les nœuds enfants et les nœuds de frères et sœurs en fonction de leur indentation dans la structure

Accéder aux éléments HTML avec JavaScript

JavaScript fournit plusieurs méthodes pour relier les éléments d'une page Web HTML en interagissant avec le DOM. Ces méthodes sont à savoir:

• getElementByid ()
• getElementByClassName ()
• getElementByName ()
• getElementByTagName ()
• getElementByTagns ()

Pour démontrer cela, créez une page HTML avec les lignes suivantes:

Je suis une balise P dans le dom

Ajoutez le lien au fichier de script à l'aide de la ligne suivante:

À l'intérieur du fichier de script, ajoutez les lignes de code suivantes pour modifier la couleur d'arrière-plan de ce p étiquette:

var ptag = document.getElementById ("démo");
ptag.style.BackgroundColor = "Yellow";

Vous obtiendrez le résultat suivant sur le navigateur:

Voilà, vous avez changé le style d'un élément en utilisant le langage de script.

Conclusion

Le DOM est défini en standard par W3C (World Wide Web Consortium) comme interface pour que le langage de script interagisse avec les éléments du document (HTML ou XML). La langue de script (par exemple JavaScript) ne peut pas accéder directement aux éléments de la page Web. Par conséquent, il interagit avec le DOM et le DOM agit comme une API et effectue des changements dans les éléments de la page Web HTML. La structure DOM est comme un arbre, ayant des nœuds parents, des nœuds enfants et des nœuds frères.