JS

Sélection d'éléments HTML

Sélection d'Éléments HTML en JavaScript


La sélection d'éléments HTML est une opération fondamentale en JavaScript. Cela permet d'interagir avec les éléments de la page web, de modifier leur contenu, leur style ou de leur ajouter des écouteurs d'événements.


1. Méthodes de Sélection :


JavaScript propose différentes méthodes pour sélectionner des éléments HTML dans le DOM (Document Object Model) :


  • getElementById : Sélectionne un élément en fonction de son identifiant unique (ID).
  • getElementsByClassName : Sélectionne tous les éléments qui ont une classe spécifique.
  • getElementsByTagName : Sélectionne tous les éléments d'un type spécifique (par exemple, tous les éléments <div>).
  • querySelector : Sélectionne le premier élément correspondant à un sélecteur CSS spécifique.
  • querySelectorAll : Sélectionne tous les éléments correspondant à un sélecteur CSS spécifique.


2. Exemples de Sélection :


// Sélection d'un élément par son ID
let element = document.getElementById('monElement');

// Sélection de tous les éléments par leur classe
let elements = document.getElementsByClassName('maClasse');

// Sélection de tous les éléments d'un type spécifique
let divs = document.getElementsByTagName('div');

// Sélection du premier élément correspondant à un sélecteur CSS
let premierElement = document.querySelector('#monElement');

// Sélection de tous les éléments correspondant à un sélecteur CSS
let tousLesElements = document.querySelectorAll('.maClasse');


3. Utilisation de la Méthode querySelector :


La méthode querySelector est particulièrement puissante car elle vous permet de sélectionner des éléments en utilisant des sélecteurs CSS, ce qui vous donne une grande flexibilité dans le choix des éléments.


Exemples de Sélection avec querySelector :


// Sélection de tous les paragraphes avec la classe "important"
let paragraphes = document.querySelectorAll('p.important');

// Sélection de tous les éléments avec l'attribut "data-category"
let elementsAvecAttribut = document.querySelectorAll('[data-category]');


4. Utilisation de NodeList :


Les méthodes de sélection renvoient souvent des objets NodeList, qui sont similaires à des tableaux mais avec des méthodes et des propriétés limitées.


Exemple d'Utilisation de NodeList :


let paragraphes = document.querySelectorAll('p');

// Parcourir tous les paragraphes sélectionnés
paragraphes.forEach(function(paragraphe) {
    console.log(paragraphe.textContent);
});


5. Utilisation de document comme Point d'Entrée :


Toutes les méthodes de sélection d'éléments HTML sont des propriétés de l'objet document, qui représente l'ensemble de la page web.


Exemple :


let header = document.querySelector('header');
let titre = header.querySelector('h1');


En résumé, la sélection d'éléments HTML en JavaScript est une opération essentielle pour interagir avec le contenu d'une page web. En comprenant les différentes méthodes de sélection et en les utilisant de manière appropriée, vous pouvez accéder et manipuler facilement les éléments de la page pour créer des expériences web dynamiques et interactives.

359 vues
Posté le 26 mars 2024
Publicité Sitedudev
Cette pub permet au site de vivre ...
Publicité
Cette pub permet au site de vivre ...
Voir d'autres articles
3 561 vues
Créer un topic
Créer un topicDans notre dossier **f_forum**, nous allons créer une nouvelle page creer_topic.php. Cette page permettra à vos utilisateurs de pouvoir créer un topic afin de demande de l'aide,...
Créer son site
233 vues
Utilisation de gradients, ombres et transitions pour des effets visuels
Utilisation de Gradients, Ombres et Transitions pour des Effets VisuelsEn CSS, vous pouvez utiliser des gradients, des ombres et des transitions pour ajouter des effets visuels attrayants à vos...
CSS
4 204 vues
Ajout d'images avec <img> et attributs src, alt et width
Ajout d'images avec <img> et attributs src, alt et widthLa balise <img> est utilisée pour afficher des images dans une page HTML. Elle nécessite l'utilisation de certains attributs pour...
HTML
3 188 vues
Faire une demande d'ami
Maintenant que notre base de données est créée, nous allons nous attaquer à la partie visuelle de notre système d'amis.Pour commencer nous allons créer notre formulaire pour faire une demande...
Créer son site
3 714 vues
Différencier HTML (structure) de CSS (présentation)
Différencier HTML (structure) de CSS (présentation)HTML (HyperText Markup Language) et CSS (Cascading Style Sheets) sont deux langages complémentaires utilisés pour créer des sites Web, mais ils...
CSS
376 vues
Comprendre les concepts de marge, bordure, rembourrage et largeur/hauteur
Dans CSS, la mise en page des éléments est souvent influencée par quatre concepts clés : la marge, la bordure, le rembourrage et la largeur/hauteur. Comprendre ces concepts est essentiel pour...
CSS
40 475 vues
Inscription en PHP
Pour débuter notre site nous allons créer un formulaire d'inscription afin d'enregistrer de nouveaux utilisateurs dans une base de données (BDD).Pour cela, il faut créer un formulaire...
Créer son site
2 616 vues
Se connecter en PHP
Nous allons dans cette vidéo créer un formulaire PHP afin de nous connecter à notre site web.Pour cela nous allons utiliser la combinaison mail + mot de passe afin de nous connecter.Nous allons...
Créer son site de rencontres
Publicité
Cette pub permet au site de vivre ...