web-dev-qa-db-fra.com

Document.querySelector () JavaScript identique à la méthode jQuery $ ()?

Je me demandais pourquoi les gens glorifiaient la méthode $(".myClass") de jQuery alors que JavaScript avait un document.querySelector() générique. Y a-t-il quelque chose qui me manque ici? Pourquoi ne pas simplement utiliser l'objet document?

Je suis complètement nouveau sur JavaScript, donc y a-t-il un type de con à document.querySelector() que je ne connais pas?

J'aimerais vraiment savoir, car j'ai rencontré quelque chose comme ça plus tôt et je me demande si cela pourrait aider une situation dans laquelle je me trouve:

var retrieve = function( s ) {
    return document.querySelector( s );
};

retrieve(".myClass").style.display = "block";

Remarque

Je n'ai rien contre jQuery du tout. En fait, j'adore ça. Cependant, je préfère ne pas me tromper en utilisant les outils prêts à l'emploi prédéfinis faciles lorsque j'essaie à présent d'apprendre JavaScript.

Toute aide serait très appréciée! :-)

javascriptjquerydommodeldocument
31
ModernDesigner

Prise en charge multi-navigateur et héritée.

Vous pouvez également utiliser getElementsByClassName () si vous ne souhaitez pas utiliser Jquery. Il y a une réponse à un post sur devshed par l'utilisateur: KorRedDevil qui peut vous intéresser.

J'ai pris votre fonction de votre message et l'ai fait retourner un tableau. Une fois que vous avez ce tableau d'éléments, tout ce que vous avez à faire est de les parcourir en boucle. Vous pouvez l'essayer ici .

Javascript :

var retrieve = function(className) {
    return document.getElementsByClassName(className);
};

var elements = retrieve('foo');
for (var i = 0; i < elements.length; i++)
    elements[i].style.background = '#dfd';

Balisage :

<p class="foo">foo</p>
<p class="bar">bar</p>
<p class="foo">foo</p>
<p class="foo">foo</p>
<p class="bar">bar</p>
<p class="bar">bar</p>
20
Mr. Polywhirl

Il y a une dizaine d'années, les principaux navigateurs étaient IE6, Netscape 8 et Firefox 1.5. À cette époque, il y avait peu de façons multi-navigateurs de sélectionner un élément du DOM en plus Document.getElementById() .

Donc, quand jQuery est sorti en 2006 , c'était assez révolutionnaire. À l'époque, jQuery définissait la norme pour sélectionner/modifier facilement des éléments HTML et déclencher des événements, car sa flexibilité et la prise en charge du navigateur étaient sans précédent.

Maintenant, plus d'une décennie plus tard, de nombreuses fonctionnalités qui ont rendu jQuery si populaire sont devenues incluses dans la norme JavaScript. Au lieu de jQuery $selection.on() , vous pouvez maintenant utiliser EventTarget.addEventListener() . Au lieu de jQuery $() , vous pouvez maintenant utiliser Document.querySelectorAll() ... etc ... ce qui pose la question de savoir pourquoi nous devrions utiliser jQuery. Et en effet, les gens se demandent de plus en plus si nous devons utiliser jQuery . Donc, si vous pensez que vous comprenez assez bien JavaScript pour vous passer de jQuery, faites-le! Ne vous sentez pas obligé d'utiliser jQuery, juste parce que tant d'autres le font!

Quoi qu'il en soit, pour comprendre pourquoi jQuery est si populaire, il est important de comprendre d'où nous venons!

12
John Slegers