Sélectionner un élément par ID ou classe en JavaScript et jQuery

Il arrive souvent de devoir sélectionner plusieurs éléments HTML dont l’ID ou la classe suit une convention de nommage.

Par exemple, vous avez des éléments avec des IDs comme toto_1, toto_2, toto_3, ou des classes comme item-active, item-disabled, item-featured. Vous ne voulez pas cibler chaque élément à la main. Vous voulez dire au navigateur : “donne-moi tout ce qui commence par cette chaîne”.

Bonne nouvelle : vous pouvez le faire avec les sélecteurs CSS d’attributs, en JavaScript natif ou avec jQuery.

Aujourd’hui, je recommande de commencer par JavaScript natif. jQuery reste utile si votre projet l’utilise déjà, notamment dans WordPress, WooCommerce ou une ancienne base de code. Mais pour une simple sélection d’éléments, le navigateur sait très bien se débrouiller tout seul. Il a grandi, le petit.

Sélectionner un ID exact

Pour sélectionner un élément par son ID exact en JavaScript natif, utilisez getElementById() :

const element = document.getElementById('toto_1');Langage du code : JavaScript (javascript)

C’est la méthode la plus directe et la plus performante pour un ID précis.

L’équivalent jQuery :

const $element = jQuery('#toto_1');Langage du code : PHP (php)

La documentation jQuery indique d’ailleurs que le sélecteur ID utilise document.getElementById() quand c’est possible, ce qui le rend très efficace.

Sélectionner une classe exacte

Pour sélectionner tous les éléments qui possèdent une classe précise :

const elements = document.querySelectorAll('.featured-item');Langage du code : JavaScript (javascript)

Si vous voulez une collection HTML live, vous pouvez aussi utiliser :

const elements = document.getElementsByClassName('featured-item');Langage du code : JavaScript (javascript)

Dans la plupart des cas modernes, querySelectorAll() est plus souple et plus lisible.

Avec jQuery :

const $elements = jQuery('.featured-item');Langage du code : PHP (php)

Sélectionner les éléments dont l’ID commence par une chaîne

Pour sélectionner tous les éléments dont l’ID commence par toto_, utilisez le sélecteur d’attribut ^=.

En JavaScript natif :

const elements = document.querySelectorAll('[id^="toto_"]');Langage du code : JavaScript (javascript)

Avec jQuery :

const $elements = jQuery('[id^="toto_"]');Langage du code : PHP (php)

Le sélecteur [id^="toto_"] signifie : sélectionne les éléments dont l’attribut id commence par toto_.

Exemple HTML :

<div id="toto_1">Premier</div>
<div id="toto_2">Deuxième</div>
<div id="tata_1">Troisième</div>Langage du code : HTML, XML (xml)

Le sélecteur suivant récupère seulement les deux premiers éléments :

document.querySelectorAll('[id^="toto_"]');Langage du code : JavaScript (javascript)

Sélectionner les éléments dont l’ID finit par une chaîne

Pour sélectionner les éléments dont l’ID finit par une chaîne, utilisez $=.

En JavaScript natif :

const elements = document.querySelectorAll('[id$="_mobile"]');Langage du code : JavaScript (javascript)

Avec jQuery :

const $elements = jQuery('[id$="_mobile"]');Langage du code : PHP (php)

Ce sélecteur récupère par exemple :

<button id="menu_mobile">Menu</button>
<div id="search_mobile">Recherche</div>Langage du code : HTML, XML (xml)

Mais il ignore :

<button id="mobile_menu">Menu</button>Langage du code : HTML, XML (xml)

Sélectionner les éléments dont l’ID contient une chaîne

Pour sélectionner les éléments dont l’ID contient une chaîne, utilisez *=.

En JavaScript natif :

const elements = document.querySelectorAll('[id*="product"]');Langage du code : JavaScript (javascript)

Avec jQuery :

const $elements = jQuery('[id*="product"]');Langage du code : PHP (php)

Ce sélecteur récupère tous les éléments dont l’ID contient product, peu importe sa position :

<div id="product_123"></div>
<div id="related_product_456"></div>
<div id="woocommerce-product-gallery"></div>Langage du code : HTML, XML (xml)

Utilisez-le avec prudence. *= peut attraper plus d’éléments que prévu. C’est pratique, mais un peu gourmand. Comme un regex écrit un vendredi soir.

Faire la même chose avec les classes

Les classes peuvent aussi être sélectionnées avec des sélecteurs d’attributs, car class est un attribut HTML.

Classe qui commence par une chaîne :

const elements = document.querySelectorAll('[class^="card-"]');Langage du code : JavaScript (javascript)

Classe qui finit par une chaîne :

const elements = document.querySelectorAll('[class$="-active"]');Langage du code : JavaScript (javascript)

Classe qui contient une chaîne :

const elements = document.querySelectorAll('[class*="product"]');Langage du code : JavaScript (javascript)

Mais attention : l’attribut class peut contenir plusieurs classes séparées par des espaces.

Exemple :

<div class="entry card-featured is-active"></div>Langage du code : HTML, XML (xml)

Dans ce cas, [class^="card-"] ne matchera pas, car l’attribut complet commence par entry, pas par card-.

Pour chercher une classe partielle dans une liste de classes, [class*="card-"] fonctionne souvent mieux :

const cards = document.querySelectorAll('[class*="card-"]');Langage du code : JavaScript (javascript)

Mais cela peut aussi attraper des classes non prévues. Si vous contrôlez le HTML, préférez une classe commune simple :

<div class="card card-featured"></div>
<div class="card card-compact"></div>Langage du code : HTML, XML (xml)

Puis sélectionnez :

const cards = document.querySelectorAll('.card');Langage du code : JavaScript (javascript)

C’est plus lisible, plus robuste, et votre futur vous évitera de vous insulter en relisant le code.

Résumé des sélecteurs utiles

Sélecteur	Signification	Exemple
#id	ID exact	#main-header
.class	Classe exacte	.button
[id^="prefix"]	ID qui commence par	[id^="toto_"]
[id$="suffix"]	ID qui finit par	[id$="_mobile"]
[id*="text"]	ID qui contient	[id*="product"]
[class*="text"]	Attribut class qui contient	[class*="card-"]
[data-role="tab"]	Attribut data exact	[data-role="tab"]

Utiliser des attributs data-* plutôt que des IDs dynamiques

Si vous écrivez le HTML vous-même, ne vous forcez pas à cibler des IDs générés dynamiquement. Utilisez plutôt des attributs data-*.

Exemple HTML :

<button data-action="toggle-panel" data-panel-id="shipping">
	Ouvrir la livraison
</button>

<button data-action="toggle-panel" data-panel-id="billing">
	Ouvrir la facturation
</button>Langage du code : HTML, XML (xml)

Sélection en JavaScript :

const buttons = document.querySelectorAll('[data-action="toggle-panel"]');Langage du code : JavaScript (javascript)

Avec jQuery :

const $buttons = jQuery('[data-action="toggle-panel"]');Langage du code : PHP (php)

Les attributs data-* rendent l’intention plus claire. Vous ciblez une fonction, pas un détail de nommage fragile.

Boucler sur les éléments trouvés

Avec JavaScript natif, querySelectorAll() retourne une NodeList. Vous pouvez utiliser forEach() :

const elements = document.querySelectorAll('[id^="toto_"]');

elements.forEach((element) => {
	element.classList.add('is-visible');
});Langage du code : JavaScript (javascript)

Avec jQuery :

jQuery('[id^="toto_"]').each(function () {
	jQuery(this).addClass('is-visible');
});Langage du code : JavaScript (javascript)

Si vous écrivez du JavaScript moderne, la version native est plus légère et plus lisible.

Ajouter un événement sur des éléments dynamiques

Si les éléments existent déjà dans la page, vous pouvez attacher un événement directement :

const buttons = document.querySelectorAll('[id^="toggle_"]');

buttons.forEach((button) => {
	button.addEventListener('click', () => {
		console.log(`Bouton cliqué : ${button.id}`);
	});
});Langage du code : JavaScript (javascript)

Si les éléments sont ajoutés plus tard par AJAX, utilisez la délégation d’événements :

document.addEventListener('click', (event) => {
	const button = event.target.closest('[id^="toggle_"]');

	if (!button) {
		return;
	}

	console.log(`Bouton dynamique cliqué : ${button.id}`);
});Langage du code : JavaScript (javascript)

La méthode closest() remonte depuis l’élément cliqué jusqu’au premier parent qui correspond au sélecteur. Elle est parfaite pour gérer les clics sur des éléments internes, comme une icône dans un bouton. MDN précise que closest() traverse l’élément courant et ses parents jusqu’à trouver un élément correspondant au sélecteur. :contentReference[oaicite:2]{index=2}

Équivalent jQuery avec délégation :

jQuery(document).on('click', '[id^="toggle_"]', function () {
	console.log(`Bouton dynamique cliqué : ${this.id}`);
});Langage du code : JavaScript (javascript)

Échapper les IDs spéciaux

Les IDs HTML peuvent contenir des caractères pénibles pour les sélecteurs CSS : deux-points, points, crochets, espaces ou caractères générés par certains frameworks.

Exemple :

<div id="field:name"></div>Langage du code : HTML, XML (xml)

Cette sélection peut échouer si vous écrivez le sélecteur naïvement :

document.querySelector('#field:name');Langage du code : JavaScript (javascript)

Utilisez plutôt CSS.escape() quand l’ID vient d’une variable :

const id = 'field:name';
const element = document.querySelector(`#${CSS.escape(id)}`);Langage du code : JavaScript (javascript)

Ou évitez le sélecteur CSS et utilisez directement :

const element = document.getElementById('field:name');Langage du code : JavaScript (javascript)

Pour un ID exact, getElementById() reste souvent la solution la plus simple.

Cas WordPress : cibler des blocs, widgets ou champs admin

Dans WordPress, les IDs et classes peuvent être générés automatiquement par le cœur, par un plugin, par un constructeur ou par Gutenberg. Vous pouvez donc rencontrer des noms comme :

block-123456
menu-item-42
taxonomy-category
woocommerce-product-data
acf-field_abc123

Pour cibler des blocs ou champs générés, les sélecteurs d’attributs peuvent être pratiques :

const menuItems = document.querySelectorAll('[id^="menu-item-"]');
const acfFields = document.querySelectorAll('[id^="acf-field_"]');
const productPanels = document.querySelectorAll('[id*="woocommerce-product"]');Langage du code : JavaScript (javascript)

Mais évitez de dépendre d’un ID interne si vous pouvez ajouter une classe ou un attribut plus stable. Dans un thème ou un plugin WordPress, préférez générer un markup clair :

<button class="sky-toggle-button" data-sky-action="toggle-section">
	Ouvrir
</button>Langage du code : HTML, XML (xml)

Puis ciblez :

const buttons = document.querySelectorAll('[data-sky-action="toggle-section"]');Langage du code : JavaScript (javascript)

C’est beaucoup plus maintenable qu’un sélecteur qui dépend d’un ID généré par un plugin tiers.

Cas WordPress admin : jQuery est déjà présent

Dans l’administration WordPress, jQuery est généralement déjà disponible. Il faut cependant utiliser jQuery, pas forcément $, car WordPress charge jQuery en mode noConflict.

Exemple sûr dans WordPress admin :

jQuery(function ($) {
	const $fields = $('[id^="acf-field_"]');

	$fields.each(function () {
		$(this).addClass('sky-highlighted-field');
	});
});Langage du code : JavaScript (javascript)

Dans un fichier JavaScript moderne, vous pouvez aussi éviter jQuery même dans WordPress :

document.addEventListener('DOMContentLoaded', () => {
	const fields = document.querySelectorAll('[id^="acf-field_"]');

	fields.forEach((field) => {
		field.classList.add('sky-highlighted-field');
	});
});Langage du code : JavaScript (javascript)

Si jQuery est déjà chargé et que vous travaillez dans un vieux plugin, utilisez-le. Si vous écrivez du code neuf, JavaScript natif suffit dans la majorité des cas.

Performance : éviter les sélecteurs trop larges

Les sélecteurs comme [id*="text"] ou [class*="text"] sont pratiques, mais ils obligent le navigateur à comparer des chaînes sur beaucoup d’éléments.

Sur une petite page, aucun souci. Sur une grosse administration WordPress ou une page WooCommerce très chargée, mieux vaut limiter le contexte.

Au lieu de chercher dans tout le document :

const fields = document.querySelectorAll('[id^="field_"]');Langage du code : JavaScript (javascript)

Commencez par cibler un conteneur :

const form = document.querySelector('#checkout-form');

if (form) {
	const fields = form.querySelectorAll('[id^="field_"]');
}Langage du code : JavaScript (javascript)

Avec jQuery :

const $fields = jQuery('#checkout-form').find('[id^="field_"]');Langage du code : PHP (php)

Moins le navigateur cherche, mieux il se porte. C’est aussi valable pour les développeurs.

Pièges fréquents

Oublier le crochet fermant

Incorrect :

jQuery('[id^=toto_')Langage du code : JavaScript (javascript)

Correct :

jQuery('[id^="toto_"]')Langage du code : JavaScript (javascript)

Confondre ID exact et ID partiel

Pour un ID exact, utilisez :

document.getElementById('toto_1');Langage du code : JavaScript (javascript)

Pour un préfixe d’ID, utilisez :

document.querySelectorAll('[id^="toto_"]');Langage du code : JavaScript (javascript)

Croire que [class^= »card-« ] cherche chaque classe séparément

Ce sélecteur regarde l’attribut class complet. Si l’élément a class="entry card-featured", l’attribut ne commence pas par card-. Utilisez une classe commune ou un attribut data-*.

Utiliser jQuery uniquement pour sélectionner

Si jQuery n’est pas déjà chargé, ne l’ajoutez pas seulement pour faire $('.classe'). JavaScript natif fait cela très bien.

Exemple complet en JavaScript moderne

Voici un exemple simple : on sélectionne tous les boutons dont l’ID commence par toggle_, puis on ouvre ou ferme le panneau associé.

document.addEventListener('DOMContentLoaded', () => {
	const buttons = document.querySelectorAll('[id^="toggle_"]');

	buttons.forEach((button) => {
		button.addEventListener('click', () => {
			const panelId = button.id.replace('toggle_', 'panel_');
			const panel = document.getElementById(panelId);

			if (!panel) {
				return;
			}

			const isExpanded = button.getAttribute('aria-expanded') === 'true';

			button.setAttribute('aria-expanded', String(!isExpanded));
			panel.hidden = isExpanded;
		});
	});
});Langage du code : JavaScript (javascript)

HTML associé :

<button id="toggle_shipping" aria-expanded="false">
	Livraison
</button>

<div id="panel_shipping" hidden>
	Options de livraison
</div>

<button id="toggle_billing" aria-expanded="false">
	Facturation
</button>

<div id="panel_billing" hidden>
	Options de facturation
</div>Langage du code : HTML, XML (xml)

Dans un vrai projet, j’utiliserais plutôt des attributs data-*, car ils expriment mieux l’intention.

Même exemple avec data-*

Version HTML plus robuste :

<button data-toggle-panel="shipping" aria-expanded="false">
	Livraison
</button>

<div data-panel="shipping" hidden>
	Options de livraison
</div>

<button data-toggle-panel="billing" aria-expanded="false">
	Facturation
</button>

<div data-panel="billing" hidden>
	Options de facturation
</div>Langage du code : HTML, XML (xml)

JavaScript :

document.addEventListener('click', (event) => {
	const button = event.target.closest('[data-toggle-panel]');

	if (!button) {
		return;
	}

	const panelName = button.dataset.togglePanel;
	const panel = document.querySelector(`[data-panel="${CSS.escape(panelName)}"]`);

	if (!panel) {
		return;
	}

	const isExpanded = button.getAttribute('aria-expanded') === 'true';

	button.setAttribute('aria-expanded', String(!isExpanded));
	panel.hidden = isExpanded;
});Langage du code : JavaScript (javascript)

Cette version fonctionne aussi si les boutons sont ajoutés dynamiquement plus tard, grâce à la délégation d’événement.

Faut-il encore utiliser jQuery pour ce type de sélection ?

Pas si vous partez d’un projet moderne. JavaScript natif couvre très bien les besoins courants :

• document.querySelector() ;
• document.querySelectorAll() ;
• element.closest() ;
• element.matches() ;
• classList ;
• dataset ;
• addEventListener().

jQuery reste utile dans trois cas :

• le projet utilise déjà jQuery partout ;
• vous travaillez dans un vieux thème ou plugin WordPress ;
• vous maintenez du code existant sans vouloir tout réécrire.

Mais charger jQuery uniquement pour sélectionner des éléments par ID ou par classe n’a plus beaucoup d’intérêt.

Besoin d’aide pour moderniser du JavaScript WordPress ?

Checklist rapide

• Utiliser getElementById() pour un ID exact.
• Utiliser querySelector() pour le premier élément correspondant.
• Utiliser querySelectorAll() pour plusieurs éléments.
• Utiliser [id^="prefix"] pour un ID qui commence par une chaîne.
• Utiliser [id$="suffix"] pour un ID qui finit par une chaîne.
• Utiliser [id*="text"] pour un ID qui contient une chaîne.
• Éviter [class^="prefix"] si l’élément possède plusieurs classes.
• Préférer une classe commune ou un attribut data-* quand vous contrôlez le HTML.
• Utiliser closest() pour gérer les clics sur éléments dynamiques.
• Limiter le contexte de recherche sur les grosses pages.
• Ne pas charger jQuery uniquement pour sélectionner des éléments.

FAQ : sélectionner un élément par ID ou classe

Comment sélectionner un élément par ID en JavaScript ?

Utilisez document.getElementById('mon-id') pour un ID exact. Pour un sélecteur CSS plus complexe, utilisez document.querySelector('#mon-id').

Comment sélectionner tous les éléments dont l’ID commence par une chaîne ?

Utilisez document.querySelectorAll('[id^="prefix_"]'). Avec jQuery, utilisez jQuery('[id^="prefix_"]').

Comment sélectionner tous les éléments dont l’ID finit par une chaîne ?

Utilisez document.querySelectorAll('[id$="_suffix"]'). Avec jQuery, utilisez jQuery('[id$="_suffix"]').

Comment sélectionner tous les éléments dont l’ID contient une chaîne ?

Utilisez document.querySelectorAll('[id*="texte"]'). Ce sélecteur est pratique, mais il peut récupérer plus d’éléments que prévu. Soyez précis.

Pourquoi [class^= »card-« ] ne trouve pas mon élément ?

Parce que ce sélecteur regarde l’attribut class complet. Si l’élément a class="entry card-featured", l’attribut commence par entry, pas par card-.

Faut-il encore utiliser jQuery pour sélectionner des éléments ?

Seulement si jQuery est déjà présent ou si vous maintenez un vieux projet. Pour du code neuf, JavaScript natif avec querySelectorAll(), closest() et classList suffit largement.

Sources

• MDN : Document.querySelectorAll()
• MDN : Element.querySelector()
• MDN : Element.closest()
• MDN : Element.matches()
• jQuery API : sélecteur ID
• jQuery API : sélecteur de classe
• jQuery API : sélecteur d’attribut qui commence par
• jQuery API : sélecteurs
• SkyMinds : optimiser JavaScript dans WordPress avec l’attribut defer
• SkyMinds : superposer du texte lisible sur une image de fond en CSS

Report a typo