La représentation d’un document HTML à l’intérieur d’un navigateur Web est traitée comme un arbre DOM HTML. Il s’agit d’une série d’objets et définit la structure d’une page Web.

Qu'est-ce que DOM dans JavaScript??

Aperçu

Bienvenue dans un autre article de blog passionnant dans la série de JavaScript Programming. Dans cet article, nous allons aborder un concept très basique mais essentiel de développement Web. Oui, nous allons couvrir le modèle d’objet de document dans JavaScript. Dans le passé, nous avons publié des tutoriels JavaScript qui sont obligatoires pour démarrer le développement à l’aide du langage JavaScript. Par conséquent, nous vous suggérons de lire à fond cet article de blog afin de ne rien manquer lié à ce concept important. Commençons ce guide et découvrons ce que Dom dans JavaScript , les propriétés DOM et comment vous pouvez interagir avec elle par programme. Nous couvrirons les sujets suivants dans ce guide JavaScript:

Qu’est-ce que le modèle d’objet de document (DOM)?

Dom représente? Document Object Model (DOM) est la représentation d’une page Web dans un navigateur Web. Simplement, la représentation hiérarchique des éléments d’un document HTML dans un navigateur est connue sous le nom de modèle d’objet de document. Il est formé dans une forme d’arbre qui est réellement générée par le navigateur Web. Il se compose de divers nœuds connectés les uns aux autres en formant une forme d’arbre. De plus, les éléments DOM ont des attributs et des événements qui leur sont attachés. En fait, DOM est une interface de programmation qui formule la structure logique d’une page Web et explique la voie à accéder aux éléments de la page. Fondamentalement, JavaScript ne reconnaît pas les balises HTML telles que le titre, H1 et etc.

Niveaux DOM

Cette section démontrera les différents niveaux de DOM. Tout d’abord, il y a un objet de fenêtre dans un navigateur qui est toujours en haut, puis il y a un nœud de document. Jetons un coup d’œil à l’image ci-dessous:

Niveaux DOM

Eh bien, vous pouvez voir les éléments DOM de l’image ci-dessus. La fenêtre et le document sont les objets de navigateur de niveau supérieur, puis nous avons l’élément HTML comme racine. En continuant, nous avons les nœuds de tête et de carrosserie, le nœud de titre appartient au nœud de tête et le nœud corporel contient tous les nœuds qui sont rendus et visibles dans le navigateur Web. De plus, les éléments corporels contiennent des attributs que nous pouvons voir dans l’image telle que la balise d’ancrage contenant l’attribut “href”. De même, d’autres nœuds DOM contiennent divers attributs tels que IMG, META, etc.

Que sont les propriétés DOM et comment y accéder?

Jusqu’à présent, nous avons trouvé une réponse à ce qui est DOM dans JavaScript et aux niveaux DOM, et nous avons également parcouru les nœuds DOM. Dans cette section, nous passerons par les propriétés DOM et verrons comment pouvons-nous interagir avec eux. Chaque élément DOM a une valeur liée à celui-ci, comme la balise “P”, la propriété texte, la balise IMG a l’image et ainsi de suite. Les méthodes JavaScript sont utilisées pour accéder aux valeurs des nœuds. De plus, vous pouvez ajouter / supprimer les écouteurs d’événements aux éléments DOM. Vous pouvez trouver les Propriétés DOM suivantes : InnerHtml : Cette propriété est utilisée pour définir ou récupérer le contenu HTML d’un nœud DOM.

let htmlContent = document.getElementById("customID").innerHTML;

InnerText : Utilisez cette propriété DOM pour accéder ou définir le contenu textuel d’un élément HTML.

let textualContent = document.getElementById("customID").innerText;

Parentement : Vous pouvez utiliser cette propriété pour accéder au nœud parent de l’élément.

let parentNode = document.getElementById("customID").parentElement.nodeName;

Style : Mettez à jour l’attribut de style d’un élément.

let styleAttr = document.getElementById("customID").style.color = "red";

Titre : Utilisez cette propriété pour mettre à jour l’élément de titre de Dom.

document.getElementById("customID").title= "this is a web page";

Voici quelques-unes des méthodes que nous pouvons utiliser pour interagir avec JavaScript DOM: addEventListener () : Cette méthode DOM est utilisée pour attacher un gestionnaire d’événements à un élément.

document.getElementById("customID").addEventListener("click", customFunction);

getAttribute () : Cette méthode DOM est utilisée pour attacher un gestionnaire d’événements à un élément.

document.getElementById("customID").addEventListener("click", customFunction);

GetElementById () : Méthode pour obtenir un élément spécifique avec le “ID” donné.

let element = document.getElementById("myID");

QuerySelector () : Utilisez cette méthode pour obtenir le premier élément enfant qui est apparié avec un sélecteur CSS.

document.getElementById("myID").querySelector(".first").innerHTML = "change the value";

toString () : Vous pouvez utiliser cette méthode pour convertir un élément en chaîne. De même, il existe de nombreuses autres méthodes et propriétés que vous pouvez explorer.

Conclusion

Nous terminons ce tutoriel Javasxcript ici avec l’espoir que vous avez une bonne compréhension de ce qui est DOM dans JavaScript . Nous avons également parcouru les niveaux de DOM, DOM, les propriétés HTML DOM Tree et Dom . Ce billet de blog est très essentiel pour les débutants qui cherchent à avoir une forte prise sur les concepts Javascrit. De plus, vous pouvez trouver d’autres articles pertinents dans la section “Voir aussi”.

Connecte-toi avec nous

Enfin, contenerize.com propose des tutoriels JavaScript en cours sur divers sujets passionnants. Vous pouvez rester dans la boucle en nous suivant sur nos plateformes de médias sociaux, y compris Facebook, LinkedIn et Twitter.

Poser une question

Vous pouvez nous informer de vos questions ou questions sur notre Forum.

FAQS

Qu’est-ce que Dom est utilisé dans JavaScript? Vous pouvez visiter ce lien pour obtenir une réponse détaillée à cette question.

Voir également