Comment utiliser DOM et les événements en JavaScript

JavaScript peut accéder à tous les éléments d’une page Web à l’aide du Modèle Objet de Document (DOM). En fait, le navigateur Web crée un DOM pour la page Web lorsque la page est chargée. Le modèle DOM est créé comme une arborescence d’objets comme ceci:
 
 


Horloge digital en JavascriptHorloge digital en JavascriptNous pouvons afficher une horloge qui indiquera l’heure locale de l’ordinateur client en utilisant JavaScript. Notez que cette heure affichée provient de l’ordinateur de l’utilisateur…Lire plus
Manipuler le DOM

D’abord, nous allons créer un élément HTML, comme exemple, pour voir certaines méthodes et le fonctionnement des événements.

<!DOCTYPE html>
<html>

<head>
    <title>DOM (Document Object Model)</title>
</head>

<body>
    <div class="row">
        <h1>Welcom to WayToLearnX.com</h1>
        <button id="home">Home</button>
        <button id="tutorial">Tutorial</button>
        <button id="quiz">Quiz</button>
    </div>
</body>

</html>

Nous allons maintenant en apprendre davantage sur les méthodes DOM courants.
 

getElementById()

Cette méthode retourne l’élément contenant le nom id transmis. Comme nous le savons, les identifiants doivent être uniques, ce qui en fait une méthode très utile pour obtenir uniquement l’élément souhaité.

var myHome = document.getElementsById ('home');

myHome: Le nom de variable.
home: identifiant transmis. Et si nous n’avons pas d’identifiant portant ce nom spécifique, il renvoie null.
 
 

getElementsByClassName()

Cette méthode retourne une collection de tous les éléments contenant la classe transmise.

var myRow = document.getElementsByClassName('row');

myRow: Le nom de variable.
row: notre classe transmise. Si nous n’avons pas de classe avec ce nom spécifique, elle renvoie null.
 

getElementsByTagName()

Cela fonctionne de la même manière que les méthodes ci-dessus: il renvoie également une collection, mais cette fois avec une seule différence: il renvoie tous ces éléments avec le nom de balise transmise.

var buttons = document.getElementsByTagName('bouton');

boutons: Le nom de variable.
bouton: Le nom de la balise que nous souhaitons obtenir.
créer une calculatrice simple avec javascriptComment fonctionne Javascript et comment créer une calculatrice simple avecJavaScript est un langage de programmation informatique. JavaScript est un langage de script côté client. Cela signifie qu’il s’agit d’un langage de programmation informatique qui…Lire plus

Evénements :

Les événements sont des actions qui ont lieu dans le navigateur et qui peuvent être initiées par l’utilisateur ou par le navigateur lui-même. Vous trouverez ci-dessous quelques exemples d’événements courants pouvant se produire sur une page Web:

  • La page se termine
  • L’utilisateur clique sur un bouton
  • L’utilisateur survole une liste déroulante
  • L’utilisateur soumet un formulaire
  • L’utilisateur appuie sur une touche de son clavier
Comment utiliser DOM et les événements?

À l’aide de 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 à des événements existants et créer de nouveaux événements dans la page.
 
 

Objets « Document » et « window »

L’objet Window représente l’onglet. Si vous lisez ce tutoriel sur votre navigateur, votre onglet actuel représente l’objet Window.

L’objet window a accès à des informations telles que la barre d’outils, la hauteur et la largeur de la fenêtre et les alertes. Regardons comment ajouter un listener (mousedown) à l’objet window et analyser certaines de ses propriétés.
 

Comment ajouter un listener sur l’objet window

La méthode addEventListener est la méthode la plus recommandée pour ajouter un listener d’événement à une fenêtre(window), à un document ou à tout autre élément du DOM.
 
Exemple :

window.addEventListener("mousedown",function(event){
 alert("window");
 console.log(event);    // sortie : [object MouseEvent]
});

Sortie sur le navigateur :
 


QCM JavascriptQCM Javascript – Partie 1QCM sur Javascript avec des réponses pour la préparation des tests techniques, des tests en ligne, aux examens et aux certifications. Ces questions et réponses…Lire plus
Partagez cet article

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *