Tutoriel JavaScript DOM avec exemple

Table des matières:

Anonim

Qu'est-ce que DOM en JavaScript?

JavaScript peut accéder à tous les éléments d'une page Web en utilisant le modèle d'objet de document (DOM). En fait, le navigateur Web crée un DOM de la page Web lorsque la page est chargée. Le modèle DOM est créé sous la forme d'un arbre d'objets comme celui-ci:

Comment utiliser DOM et événements

En utilisant DOM, JavaScript peut effectuer plusieurs tâches. Il peut créer de nouveaux éléments et attributs, modifier les éléments et attributs existants et même supprimer des éléments et attributs existants. JavaScript peut également réagir aux événements existants et créer de nouveaux événements dans la page.

getElementById, exemple innerHTML

  1. getElementById: pour accéder aux éléments et attributs dont l'id est défini.
  2. innerHTML: pour accéder au contenu d'un élément.

Essayez vous-même cet exemple:

 DOM !!! 

Bienvenue


Voici le message de bienvenue.



Technologie


Voici la section sur la technologie.

Exemple de gestionnaire d'événements

  1. createElement: pour créer un nouvel élément
  2. removeChild: supprimer un élément
  3. Vous pouvez ajouter un gestionnaire d'événements à un élément particulier comme ceci:
 document.getElementById(id).onclick=function(){lines of code to be executed}

OU

document.getElementById(id).addEventListener("click", functionname)

Essayez vous-même cet exemple:

 DOM !!!