web-dev-qa-db-fra.com

document.getElementById vs jQuery $ ()

Est-ce:

var contents = document.getElementById('contents');

Le même que celui-ci:

var contents = $('#contents');

Étant donné que jQuery est chargé?

javascriptjqueryjquery-selectors
569
Phillip Senn

Pas exactement!!

document.getElementById('contents'); //returns a HTML DOM Object

var contents = $('#contents');  //returns a jQuery Object

Dans jQuery, pour obtenir le même résultat que document.getElementById, vous pouvez accéder à l'objet jQuery et obtenir le premier élément de l'objet (les objets JavaScript de rappel ont une action similaire à celle des tableaux associatifs).

var contents = $('#contents')[0]; //returns a HTML DOM Object
932
John Hartsock

Non.

L'appel de document.getElementById('id') renverra un objet DOM brut.

L'appel de $('#id') renverra un objet jQuery qui enveloppe l'objet DOM et fournit des méthodes jQuery.

Ainsi, vous ne pouvez appeler que des méthodes jQuery telles que css() ou animate() sur l'appel $().

Vous pouvez également écrire $(document.getElementById('id')), ce qui retournera un objet jQuery et sera équivalent à $('#id').

Vous pouvez obtenir l'objet DOM sous-jacent à partir d'un objet jQuery en écrivant $('#id')[0].

130
SLaks

Proche, mais pas pareil. Ils obtiennent le même élément, mais la version de jQuery est encapsulée dans un objet jQuery.

L'équivalent serait ceci

var contents = $('#contents').get(0);

ou ca

var contents = $('#contents')[0];

Ceux-ci vont extraire l'élément de l'objet jQuery.

30
RightSaidFred

Une note sur la différence de vitesse. Joignez le snipet suivant à un appel onclick:

function myfunc()
{
    var timer = new Date();

        for(var i = 0; i < 10000; i++)
        {
            //document.getElementById('myID');
            $('#myID')[0];
        }


    console.log('timer: ' + (new Date() - timer));
}

Remplacez-en une par une, puis l'autre. Dans mes tests,

document.getElementbyId en moyenne environ 5ms (fluctuant de 25ms jusqu'à 52ms sur environ 15 runs)

D'autre part, le

jQuery en moyenne environ 200 ms (allant de 181ms à 222ms sur environ 15 runs).

De ce simple test, vous pouvez voir que le jQuery a pris environ 6 fois aussi longtemps.

Bien sûr, c’est fini sur 10000 itérations donc dans une situation plus simple, j’utiliserais probablement jQuery pour la facilité d’utilisation et toutes les autres choses intéressantes comme .animate et .fadeTo. Mais oui, techniquement getElementById est un peu plus rapide.

23
nurdyguy

Non. Le premier renvoie un élément DOM ou null, tandis que le second renvoie toujours un objet jQuery. L'objet jQuery sera vide si aucun élément avec l'id de contents n'a été mis en correspondance.

L'élément DOM renvoyé par document.getElementById('contents') vous permet de modifier le .innerHTML (ou .value), etc., mais vous devrez utiliser méthodes jQuery sur l'objet jQuery.

var contents = $('#contents').get(0);

Est plus équivalent, cependant si aucun élément avec l'id de contents ne correspond, document.getElementById('contents') renverra null, mais $('#contents').get(0) renverra non défini.

L'un des avantages de l'utilisation de l'objet jQuery est que vous ne recevrez aucune erreur si aucun élément n'est renvoyé, car un objet est toujours renvoyé. Cependant, vous obtiendrez des erreurs si vous essayez d'effectuer des opérations sur le null renvoyé par document.getElementById

17
Matt

Non, en fait, le même résultat serait:

$('#contents')[0]

jQuery ne sait pas combien de résultats seront renvoyés par la requête. Ce que vous récupérez est un objet jQuery spécial, qui est une collection de tous les contrôles correspondant à la requête.

Une partie de ce qui rend jQuery si pratique réside dans le fait que les méthodes MOST appelées sur cet objet et qui semblent être destinées à un contrôle, sont en réalité dans une boucle appelée sur tous les membres de la collection.

Lorsque vous utilisez la syntaxe [0], vous prenez le premier élément de la collection interne. À ce stade, vous obtenez un objet DOM

15
Andrey

Au cas où quelqu'un d'autre frappe ceci ... Voici une autre différence:

Si l'ID contient des caractères non pris en charge par le standard HTML (voir SO question here ), jQuery risque de ne pas le trouver, même si getElementById le fait.

Cela m'est arrivé avec un identifiant contenant des caractères "/" (ex: id = "a/b/c"), en utilisant Chrome:

var contents = document.getElementById('a/b/c');

a pu trouver mon élément mais:

var contents = $('#a/b/c');

n'a pas.

Au fait, la solution la plus simple était de déplacer cet identifiant dans le champ du nom. JQuery n'a eu aucun mal à trouver l'élément en utilisant:

var contents = $('.myclass[name='a/b/c']);
9
user1435666

Comme la plupart des gens l’ont dit, la principale différence est qu’il est encapsulé dans un objet jQuery avec l’appel jQuery et l’objet DOM brut à l’aide de JavaScript. Bien entendu, l’objet jQuery est capable d’exécuter d’autres fonctions jQuery, mais si vous devez effectuer une simple manipulation DOM, telle que le style de base ou la gestion d’événements de base, la méthode JavaScript directe est toujours un peu plus rapide que jQuery, car Pas besoin de charger dans une bibliothèque externe de code construit sur JavaScript. Cela évite une étape supplémentaire.

5
Kobby

var contents = document.getElementById('contents');

var contents = $('#contents');

Les extraits de code ne sont pas les mêmes. le premier retourne un objet Element ( source ). La seconde, l’équivalent jQuery, renverra un objet jQuery contenant une collection de zéro ou d’un élément DOM. ( documentation jQuery ). En interne, jQuery utilise document.getElementById() pour plus d'efficacité.

Dans les deux cas, si plus d'un élément trouvé, seul le premier élément sera retourné.

Lors de la vérification du projet github pour jQuery, j'ai trouvé les extraits de ligne suivants, qui semblent utiliser les codes document.getElementById ( https://github.com/jquery/jquery/blob/master/src/core/init.js ligne 68 et suivantes)

// HANDLE: $(#id)
} else {
    elem = document.getElementById( match[2] );
5
Nipuna

Une autre différence: getElementById renvoie la correspondance première, tandis que $('#...') renvoie une collection de correspondances - oui, le même identifiant peut être répété dans un document HTML.

De plus, getElementId est appelé à partir du document, tandis que $('#...') peut être appelé à partir d'un sélecteur. Ainsi, dans le code ci-dessous, document.getElementById('content') renverra le corps entier, mais $('form #content')[0] retournera à l'intérieur du formulaire.

<body id="content">
   <h1>Header!</h1>
   <form>
      <div id="content"> My Form </div>
   </form>
</body>

Il peut sembler étrange d'utiliser des identifiants en double, mais si vous utilisez quelque chose comme Wordpress, un modèle ou un plug-in peut utiliser le même identifiant que vous utilisez dans le contenu. La sélectivité de jQuery pourrait vous aider.

4
steve banks

jQuery est construit sur JavaScript. Cela signifie que c'est juste du javascript quand même.

document.getElementById ()

La méthode document.getElementById () renvoie l'élément contenant l'attribut ID avec la valeur spécifiée et renvoie la valeur null si aucun élément avec l'ID spécifié n'existe. Un ID doit être unique dans une page.

Jquery $ ()

L'appel de jQuery () ou $ () avec un sélecteur id comme argument renverra un objet jQuery contenant une collection de zéro ou d'un élément DOM.Chaque valeur id ne doit être utilisée qu'une seule fois dans un document. Si plusieurs éléments ont reçu le même ID, les requêtes utilisant cet ID ne sélectionnent que le premier élément correspondant dans le DOM.

2
Hadi Mir

J'ai développé une base de données noSQL pour stocker les arborescences DOM dans les navigateurs Web, où les références à tous les éléments DOM de la page sont stockées dans un index court. Ainsi, la fonction "getElementById ()" n'est pas nécessaire pour obtenir/modifier un élément. Lorsque des éléments de l'arborescence DOM sont instanciés sur la page, la base de données attribue des clés primaires de substitution à chaque élément. C'est un outil gratuit http://js2dx.com

1
Gonki

Toutes les réponses ci-dessus sont correctes. Au cas où vous voudriez le voir en action, n'oubliez pas que vous avez la console dans un navigateur où vous pouvez voir le résultat final de manière parfaitement claire:

J'ai un HTML:

<div id="contents"></div>

Allez à la console (cntrl+shift+c) et utilisez ces commandes pour voir votre résultat clairement

document.getElementById('contents')
>>> div#contents

$('#contents')
>>> [div#contents,
 context: document,
 selector: "#contents",
 jquery: "1.10.1",
 constructor: function,
 init: function …]

Comme nous pouvons le constater, dans le premier cas, nous avons obtenu la balise elle-même (à savoir, à proprement parler, un objet HTMLDivElement). Dans ce dernier cas, nous n’avons en réalité pas un objet simple, mais un tableau d’objets. Et comme mentionné par d'autres réponses ci-dessus, vous pouvez utiliser la commande suivante:

$('#contents')[0]
>>> div#contents
1
Mazhar MIK