Sélecteurs en JavaScript

Introduction aux sélecteurs

Dans ce premier chapitre, nous allons introduire les sélecteurs en JavaScript et comprendre leur importance dans la manipulation de la DOM (Document Object Model).

Qu'est-ce qu'un sélecteur en JavaScript ?

Un sélecteur en JavaScript est une méthode qui permet de cibler et de sélectionner des éléments spécifiques dans une page HTML. Ces éléments peuvent être des balises, des classes, des IDs, des attributs ou d'autres critères.

Les sélecteurs en JavaScript sont utilisés pour interagir avec les éléments sélectionnés, tels que la modification de leur contenu, l'ajout ou la suppression de classes CSS, la modification des attributs, etc.

Pourquoi les sélecteurs sont-ils importants dans la manipulation de la DOM ?

La DOM représente la structure hiérarchique des éléments HTML d'une page web. Pour interagir avec ces éléments et effectuer des modifications dynamiques, il est essentiel de pouvoir les sélectionner de manière précise.

Les sélecteurs en JavaScript offrent cette capacité de sélection précise des éléments dans la DOM, ce qui permet de manipuler et de modifier le contenu et l'apparence des pages web de manière dynamique.

Comment utiliser les sélecteurs pour cibler des éléments HTML ?

En JavaScript, il existe plusieurs méthodes pour sélectionner des éléments HTML. Les plus couramment utilisées sont :

• querySelector() : Cette méthode permet de sélectionner le premier élément correspondant à un sélecteur CSS spécifié. Par exemple, document.querySelector("#myElement") sélectionne l'élément avec l'ID "myElement".

• querySelectorAll() : Cette méthode permet de sélectionner tous les éléments correspondant à un sélecteur CSS spécifié et de les stocker dans une liste. Par exemple, document.querySelectorAll(".myClass") sélectionne tous les éléments ayant la classe "myClass".

• Autres méthodes de sélection : Il existe d'autres méthodes de sélection, telles que getElementById(), getElementsByClassName(), getElementsByTagName(), qui permettent de sélectionner des éléments en fonction de leur ID, classe ou balise HTML spécifique.

Sélecteurs basés sur les balises

Dans ce chapitre, nous allons explorer les sélecteurs basés sur les balises HTML. Ces sélecteurs permettent de cibler des éléments en fonction de leur balise spécifique.

Sélectionner des éléments par leur balise HTML

La méthode la plus simple pour sélectionner des éléments en utilisant des sélecteurs basés sur les balises HTML est getElementsByTagName(). Cette méthode retourne une liste de tous les éléments correspondant à une balise spécifique.

Voici un exemple :

const paragraphs = document.getElementsByTagName('p');

Dans cet exemple, la variable paragraphs contiendra une liste de tous les éléments <p> présents dans la page.

Utiliser les sélecteurs universels pour sélectionner tous les éléments

En plus de sélectionner des éléments par une balise spécifique, il est également possible de sélectionner tous les éléments de la page en utilisant le sélecteur universel *. Ce sélecteur correspond à tous les éléments de la DOM.

Voici un exemple :

const allElements = document.querySelectorAll('*');

Dans cet exemple, la variable allElements contiendra une liste de tous les éléments de la page.

Exemples de sélecteurs basés sur les balises

Voici quelques exemples de sélecteurs basés sur les balises HTML :

• Sélectionner tous les éléments <h1> :

  const headings = document.getElementsByTagName('h1');

• Sélectionner tous les éléments <a> :

  const links = document.getElementsByTagName('a');

• Sélectionner tous les éléments <li> :

  const listItems = document.getElementsByTagName('li');

L'utilisation de sélecteurs basés sur les balises HTML permet de cibler des éléments spécifiques dans la DOM en fonction de leur balise. Cela ouvre la porte à de nombreuses possibilités de manipulation et de modification des éléments dans une page web.

Sélecteurs basés sur les classes et les IDs

Dans ce chapitre, nous allons explorer les sélecteurs basés sur les classes et les IDs. Ces sélecteurs permettent de cibler des éléments en fonction de leur classe CSS ou de leur ID unique.

Sélectionner des éléments par leur classe CSS

La méthode la plus couramment utilisée pour sélectionner des éléments par leur classe CSS est getElementsByClassName(). Cette méthode retourne une liste de tous les éléments correspondant à une classe spécifique.

Voici un exemple :

const elements = document.getElementsByClassName('myClass');

Dans cet exemple, la variable elements contiendra une liste de tous les éléments ayant la classe "myClass".

Il est également possible d'utiliser le sélecteur CSS .className pour sélectionner des éléments par leur classe en utilisant querySelectorAll().

Voici un exemple :

const elements = document.querySelectorAll('.myClass');

Cette syntaxe est similaire à celle des sélecteurs CSS et permet de cibler tous les éléments ayant la classe "myClass".

Sélectionner des éléments par leur ID unique

Chaque élément HTML peut avoir un ID unique qui lui est attribué. Pour sélectionner un élément par son ID, nous utilisons la méthode getElementById().

Voici un exemple :

const element = document.getElementById('myElement');

Dans cet exemple, la variable element contiendra l'élément ayant l'ID "myElement".

Il est important de noter que l'ID d'un élément doit être unique dans une page. Par conséquent, getElementById() renverra toujours un seul élément, s'il existe.

Combinaison de classes et d'IDs pour des sélections plus précises

Il est possible de combiner les sélecteurs basés sur les classes et les IDs pour effectuer des sélections plus précises. Par exemple, pour sélectionner un élément ayant à la fois une classe spécifique et un ID spécifique, nous pouvons utiliser le sélecteur CSS .className#id.

Voici un exemple :

const element = document.querySelector('.myClass#myId');

Dans cet exemple, la variable element contiendra l'élément ayant à la fois la classe "myClass" et l'ID "myId".

La combinaison de classes et d'IDs permet de cibler des éléments spécifiques dans la DOM et d'effectuer des manipulations précises sur eux.

Sélecteurs basés sur les attributs

Dans ce chapitre, nous allons explorer les sélecteurs basés sur les attributs des éléments HTML. Ces sélecteurs permettent de cibler des éléments en fonction de leurs attributs spécifiques.

Sélectionner des éléments par leurs attributs HTML

La méthode querySelectorAll() permet de sélectionner des éléments en utilisant des sélecteurs basés sur les attributs HTML. Ces sélecteurs spécifient le nom de l'attribut et une valeur optionnelle pour filtrer les éléments.

Voici un exemple :

const elements = document.querySelectorAll('[data-type="example"]');

Dans cet exemple, la variable elements contiendra une liste de tous les éléments ayant un attribut data-type avec la valeur "example".

Utiliser des sélecteurs d'attributs pour des sélections spécifiques

Il existe plusieurs sélecteurs d'attributs que vous pouvez utiliser pour effectuer des sélections spécifiques :

• [attribute] : Sélectionne les éléments ayant l'attribut spécifié.
• [attribute="value"] : Sélectionne les éléments ayant l'attribut spécifié avec la valeur spécifiée.
• [attribute^="value"] : Sélectionne les éléments ayant l'attribut spécifié avec une valeur qui commence par la valeur spécifiée.
• [attribute$="value"] : Sélectionne les éléments ayant l'attribut spécifié avec une valeur qui se termine par la valeur spécifiée.
• [attribute*="value"] : Sélectionne les éléments ayant l'attribut spécifié avec une valeur qui contient la valeur spécifiée.

Voici un exemple d'utilisation de ces sélecteurs :

const elements = document.querySelectorAll('input[type="text"]');

Dans cet exemple, la variable elements contiendra une liste de tous les éléments <input> de type "text".

Exemples de sélecteurs basés sur les attributs

Voici quelques exemples de sélecteurs basés sur les attributs HTML :

• Sélectionner tous les éléments avec un attribut href :

  const links = document.querySelectorAll('[href]');

• Sélectionner tous les éléments avec un attribut data-* :

  const elements = document.querySelectorAll('[data-*]');

• Sélectionner tous les éléments avec un attribut class commençant par "btn-" :

  const buttons = document.querySelectorAll('[class^="btn-"]');

Les sélecteurs basés sur les attributs offrent une grande flexibilité pour cibler des éléments en fonction de leurs attributs spécifiques. Cela permet d'effectuer des sélections précises et de manipuler les éléments de manière dynamique.

Sélecteurs avancés

Dans ce chapitre, nous allons explorer des sélecteurs avancés qui permettent de cibler des éléments spécifiques dans des situations plus complexes.

Sélectionner des éléments enfants et descendants

Les sélecteurs permettent de sélectionner des éléments enfants et descendants à l'intérieur d'un élément parent. Voici quelques exemples de sélecteurs pour effectuer ces sélections :

• Sélectionner tous les éléments enfants directs d'un élément :

  const children = parentElement.children;

• Sélectionner tous les éléments descendants d'un élément :

  const descendants = parentElement.querySelectorAll('*');

• Sélectionner des éléments enfants ou descendants en fonction de leur balise :

  const specificElements = parentElement.querySelectorAll('div > p');

Sélectionner des éléments frères

Les sélecteurs permettent également de sélectionner des éléments frères, c'est-à-dire des éléments qui partagent le même parent. Voici quelques exemples de sélecteurs pour effectuer ces sélections :

• Sélectionner tous les éléments frères précédents :

  const previousSiblings = element.previousElementSibling;

• Sélectionner tous les éléments frères suivants :

  const nextSiblings = element.nextElementSibling;

• Sélectionner tous les éléments frères :

  const siblings = element.parentElement.children;

Utiliser les sélecteurs de pseudo-classes pour des sélections spéciales

Les sélecteurs de pseudo-classes permettent de sélectionner des éléments dans des situations spécifiques. Voici quelques exemples de sélecteurs de pseudo-classes :

• Sélectionner le premier élément d'un type :

  const firstElement = document.querySelector('p:first-of-type');

• Sélectionner le dernier élément d'un type :

  const lastElement = document.querySelector('p:last-of-type');

• Sélectionner les éléments pairs :

  const evenElements = document.querySelectorAll('p:nth-of-type(even)');

• Sélectionner les éléments impairs :

  const oddElements = document.querySelectorAll('p:nth-of-type(odd)');

Exemples de sélecteurs avancés

Voici quelques exemples d'utilisation des sélecteurs avancés :

• Sélectionner tous les paragraphes à l'intérieur d'une div avec la classe "container" :

  const paragraphs = document.querySelectorAll('.container p');

• Sélectionner tous les éléments <a> qui sont des enfants directs d'une liste non ordonnée <ul> :

  const links = document.querySelectorAll('ul > a');

• Sélectionner tous les éléments <input> de type "checkbox" qui sont cochés :

  const checkedCheckboxes = document.querySelectorAll('input[type="checkbox"]:checked');

Les sélecteurs avancés offrent une grande flexibilité pour cibler des éléments spécifiques dans des situations complexes. Cela permet d'effectuer des sélections précises et de manipuler les éléments de manière dynamique.

Manipulation des éléments sélectionnés

Maintenant que nous avons appris à sélectionner des éléments à l'aide de sélecteurs en JavaScript, il est temps d'explorer comment manipuler ces éléments sélectionnés.

Modifier le contenu des éléments sélectionnés

Une fois que vous avez sélectionné des éléments, vous pouvez modifier leur contenu en utilisant les propriétés appropriées. Par exemple, vous pouvez modifier le texte à l'intérieur d'un élément en utilisant la propriété textContent ou innerHTML.

Voici un exemple :

const element = document.querySelector('.myElement');
element.textContent = 'Nouveau texte';

Dans cet exemple, le texte à l'intérieur de l'élément avec la classe "myElement" est modifié pour afficher "Nouveau texte".

Ajouter ou supprimer des classes CSS

Les classes CSS sont souvent utilisées pour appliquer des styles ou des comportements spécifiques aux éléments. Vous pouvez ajouter ou supprimer des classes à des éléments sélectionnés en utilisant les méthodes classList.add() et classList.remove().

Voici un exemple :

const element = document.querySelector('.myElement');
element.classList.add('newClass');
element.classList.remove('oldClass');

Dans cet exemple, la classe "newClass" est ajoutée à l'élément et la classe "oldClass" est supprimée de l'élément.

Modifier les attributs des éléments sélectionnés

Les attributs des éléments peuvent également être modifiés à l'aide de JavaScript. Vous pouvez accéder aux attributs d'un élément en utilisant la propriété attributes et modifier leurs valeurs en utilisant la méthode setAttribute().

Voici un exemple :

const element = document.querySelector('.myElement');
element.setAttribute('data-value', '123');

Dans cet exemple, l'attribut data-value de l'élément est modifié pour avoir la valeur "123".

Exemples de manipulation des éléments sélectionnés

Voici quelques exemples de manipulation des éléments sélectionnés :

• Modifier le style d'un élément :

  const element = document.querySelector('.myElement');
  element.style.color = 'red';
  element.style.fontSize = '20px';

• Ajouter une nouvelle balise à un élément :

  const element = document.querySelector('.myElement');
  const newElement = document.createElement('span');
  newElement.textContent = 'Nouveau contenu';
  element.appendChild(newElement);

• Supprimer un élément de la DOM :

  const element = document.querySelector('.myElement');
  element.remove();

La manipulation des éléments sélectionnés permet de modifier leur contenu, leurs styles, leurs attributs et leur structure dans la DOM. Cela offre un contrôle complet sur la présentation et le comportement des éléments dans une page web.

Exemples pratiques

Dans ce chapitre, nous allons explorer quelques exemples pratiques d'utilisation des sélecteurs en JavaScript pour effectuer des tâches courantes dans le développement web.

Valider les formulaires avec des sélecteurs

Les sélecteurs en JavaScript peuvent être utilisés pour valider les données saisies dans les formulaires. Voici un exemple de validation d'un formulaire simple :

const form = document.querySelector('form');

form.addEventListener('submit', (event) => {
  event.preventDefault();

  const input = form.querySelector('input');
  const value = input.value.trim();

  if (value === '') {
    // Afficher un message d'erreur
    const error = document.createElement('p');
    error.textContent = 'Le champ est vide';
    form.appendChild(error);
  } else {
    // Soumettre le formulaire
    form.submit();
  }
});

Dans cet exemple, nous utilisons le sélecteur querySelector() pour sélectionner l'élément <input> dans le formulaire. Nous vérifions ensuite si la valeur saisie est vide et affichons un message d'erreur si nécessaire.

Créer des menus déroulants dynamiques

Les sélecteurs en JavaScript peuvent également être utilisés pour créer des menus déroulants dynamiques qui réagissent aux sélections de l'utilisateur. Voici un exemple :

<select id="countrySelect">
  <option value="france">France</option>
  <option value="spain">Spain</option>
  <option value="italy">Italy</option>
</select>

<div id="cityContainer"></div>

const countrySelect = document.querySelector('#countrySelect');
const cityContainer = document.querySelector('#cityContainer');

countrySelect.addEventListener('change', () => {
  const selectedCountry = countrySelect.value;

  // Récupérer les villes en fonction du pays sélectionné
  const cities = getCities(selectedCountry);

  // Afficher les villes dans le conteneur
  cityContainer.innerHTML = '';

  cities.forEach((city) => {
    const option = document.createElement('option');
    option.textContent = city;
    cityContainer.appendChild(option);
  });
});

Dans cet exemple, nous utilisons le sélecteur querySelector() pour sélectionner l'élément <select> avec l'ID "countrySelect". Lorsque l'utilisateur sélectionne un pays, nous récupérons les villes correspondantes à l'aide d'une fonction getCities() (à définir). Nous affichons ensuite les villes dans le conteneur <div> avec l'ID "cityContainer".

Manipuler la structure HTML avec les sélecteurs

Les sélecteurs en JavaScript peuvent être utilisés pour manipuler la structure HTML d'une page web. Voici un exemple de création d'un élément <div> et de son insertion dans la DOM :

const container = document.querySelector('.container');

const newDiv = document.createElement('div');
newDiv.textContent = 'Nouveau contenu';

container.appendChild(newDiv);

Dans cet exemple, nous utilisons le sélecteur querySelector() pour sélectionner l'élément avec la classe "container". Nous créons ensuite un nouvel élément <div>, définissons son contenu et l'insérons dans le conteneur sélectionné à l'aide de la méthode appendChild().

Conclusion

Dans ce chapitre, nous avons exploré les sélecteurs en JavaScript, qui sont des outils puissants pour cibler et manipuler des éléments HTML dans une page web. Nous avons appris différentes méthodes de sélection, telles que querySelector(), querySelectorAll(), getElementById(), getElementsByClassName(), getElementsByTagName(), ainsi que les sélecteurs basés sur les balises, les classes, les IDs et les attributs.

Nous avons également abordé les sélecteurs avancés, tels que la sélection des éléments enfants et descendants, des éléments frères et l'utilisation des sélecteurs de pseudo-classes. Nous avons vu comment manipuler les éléments sélectionnés en modifiant leur contenu, en ajoutant ou supprimant des classes CSS, en modifiant leurs attributs et en manipulant leur structure dans la DOM.

Les sélecteurs en JavaScript offrent une flexibilité et un contrôle complets pour interagir avec les éléments HTML d'une page web. Ils sont essentiels pour la manipulation dynamique de la DOM, la création d'interactions utilisateur et la personnalisation de l'apparence des pages web.

Sources

• Locating DOM elements using selectors - Web APIs | MDN
• HTML DOM Document querySelector() Method - W3Schools
• CSS selectors - CSS: Cascading Style Sheets | MDN
• Attribute selectors - Learn web development | MDN