Sélecteurs DOM JavaScript / jQuery

jQuery vs JavaScript

jQuery a été créé par John Resig en 2006. Il vise à gérer les incompatibilités des navigateurs et à simplifier les opérations sur le DOM HTML, les gestionnaires d'événements, les animations et les appels Ajax.

Depuis plus de dix ans, jQuery est la bibliothèque JavaScript la plus populaire au monde.

Cependant, depuis la version 5 de JavaScript (2009), la plupart des utilitaires jQuery peuvent être résolus en quelques lignes de JavaScript standard :

Recherche d'éléments HTML par id

Renvoie l'élément avec id="intro" :

jQuery

var myElement = $("#id01");

Essayez-le vous-même

JavaScript

var myElement = document.getElementById("id01");

Essayez-le vous-même

Recherche d'éléments HTML par nom de balise

Renvoie tous les éléments <p> :

jQuery

var myElements = $("p");

Essayez-le vous-même

Exemple

var myElements = document.getElementsByTagName("p");

Essayez-le vous-même

Recherche d'éléments HTML via les noms de classe

Retourne tous les éléments contenant la classe "intro".

jQuery

var myElements = $(".intro");

Essayez-le vous-même

JavaScript

var myElements = document.getElementsByClassName("intro");

Essayez-le vous-même

La recherche d'éléments via les noms de classe ne fonctionne pas dans Internet Explorer 8 et les versions antérieures.

Recherche d'éléments HTML via les sélecteurs CSS

Retourne la liste de tous les éléments <p> contenant la classe "intro".

jQuery

var myElements = $("p.intro");

Essayez-le vous-même

JavaScript

var myElements = document.querySelectorAll("p.intro");

Essayez-le vous-même

querySelectorAll() Les méthodes ne fonctionnent pas dans Internet Explorer 8 et les versions antérieures.