document.getElementById vs jQuery $ ()

620

Est-ce:

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

Le même que celui-ci:

var contents = $('#contents');

Étant donné que jQuery est chargé?

Phillip Senn
la source
10
En plus des points soulevés dans les réponses, la version jQuery est une application. 100x plus lent.
8
est-ce prouvé quelque part?
FranBran
12
@torazaburo En fait, la version jQuery n'est même pas 3 fois plus lente (au moins au moins Chrome). Voir: jsperf.com/getelementbyid-vs-jquery-id/44
Michał Perłakowski
2
@ MichałPerłakowski dans ce lien, la version jquery est 10 fois plus lente. 26mil vs 2.4mil
Claudiu Creanga
1
Le lien correct mis à jour pour JSPerf est: jsperf.com/getelementbyid-vs-jquery-id Dans mon cas (FF 58) c'est 1000 fois plus lent. Quoi qu'il en soit, jQuery effectue toujours 2,5 millions d'opérations par seconde. En général, ce n'est pas un problème, et cela ne peut certainement pas être comparé en termes de fonctionnalité.
Diego Jancic

Réponses:

1017

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 (n'oubliez pas que les objets JavaScript agissent de manière similaire aux tableaux associatifs).

var contents = $('#contents')[0]; //returns a HTML DOM Object
John Hartsock
la source
24
Pour toute personne intéressée document.getElementByne fonctionne pas correctement dans <IE8. Il obtient également des éléments par nameconséquent, vous pourriez théoriquement soutenir document.getElementByIdque non seulement il est trompeur, mais qu'il peut renvoyer des valeurs incorrectes. Je pense que @John a ajouté ceci, mais je pensais que cela ne ferait pas de mal de l'ajouter.
Lime
14
Faites attention si votre identifiant n'est pas fixe. $('#'+id)[0]n'est pas égal à document.getElementById(id)car idpeut contenir des caractères qui sont traités comme spéciaux dans jQuery!
Jakob
1
C'était très utile - je n'ai jamais su ça! Je suis sûr que je l'ai déjà utilisé auparavant, ce qui me déconcerte. Hé, tu apprends quelque chose tous les jours! Merci!
jedd.ahyoung
3
google jquery equivalent of document.getelementbyidet le premier résultat est ce post. Merci!!!
ajakblackgoat
$('#contents')[0].idrenvoie le nom de l'identifiant.
Omar
139

Non.

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

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

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

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

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

SLaks
la source
4
Savez-vous par hasard lequel est le plus rapide - $ (document.getElementById ('element')) vs $ ('# element')?
Ivan Ivković
10
@ IvanIvković: Le premier est plus rapide, car il n'implique pas l'analyse de chaîne.
SLaks
1
@SLaks Quelle est la principale différence entre un objet DOM brut et un objet jQuery? Juste qu'en utilisant l'objet jQuery, nous avons la possibilité d'appliquer des méthodes jQuery?
Roxy'Pro
@ Roxy'Pro: Ce sont des objets différents. Les objets jQuery enveloppent les objets DOM. Consultez la documentation.
SLaks
Cette doc JavaScript DOM Objects vs jQuery Objects semble utile. In one sentence, DOM objects are the objects that the web browser is using to render elements on the web page whereas jQuery objects are basically wrapper objects around a set of DOM elements.
user3454439
31

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

L'équivalent serait ceci

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

ou ca

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

Ceux-ci retireront l'élément de l'objet jQuery.

RightSaidFred
la source
29

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));
}

Alterner commenter l'un et ensuite commenter l'autre. Dans mes tests,

document.getElementbyId en moyenne environ 35 ms (fluctuant de 25msjusqu'à 52msenviron 15 runs)

D’un autre côté, le

jQuery était en moyenne d'environ 200 ms (allant de 181msà 222msenviron 15 runs).

A partir de ce test simple, vous pouvez voir que le jQuery a pris environ 6 fois plus de temps.

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

nurdyguy
la source
Merci pour cette réponse. Je voulais demander, devrais-je remplacer tous les $('#someID') par document.getElementById("someID") ? Je travaille sur quelque chose dans lequel j'ai largement utilisé $('#someID')et ma page fonctionne lentement pour les entrées de gros fichiers. Veuillez me suggérer quel devrait être mon déménagement.
Mazhar MIK
Si vous réutilisez le même plusieurs fois dans la même étendue, enregistrez-le, aimez var $myId = $('#myId');et réutilisez la variable enregistrée $myId. La recherche par identifiant est généralement une chose assez rapide, donc si la page est lente, il y a probablement une raison différente.
nurdyguy
Merci @nurdyguy. C'était utile. Je vais essayer de mettre cela en œuvre.
Mazhar MIK
17

Non. Le premier retourne un élément DOM, ou null, tandis que le second retourne toujours un objet jQuery. L'objet jQuery sera vide si aucun élément avec l'id de contentsn'a été trouvé.

L'élément DOM retourné par document.getElementById('contents')vous permet de faire des choses telles que changer le .innerHTML(ou .value) etc., mais vous devrez utiliser des méthodes jQuery sur l'objet jQuery.

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

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

L'un des avantages de l'utilisation de l'objet jQuery est que vous n'obtiendrez 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 nullrevenu pardocument.getElementById

Mat
la source
15

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

$('#contents')[0] 

jQuery ne sait pas combien de résultats seraient renvoyés par la requête. Ce que vous obtenez en retour est un objet jQuery spécial qui est une collection de tous les contrôles qui correspondent à la requête.

Une partie de ce qui rend jQuery si pratique est que la plupart des méthodes appelées sur cet objet qui semblent être destinées à un contrôle, sont en fait 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

Andrey
la source
10

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

Si l'id contient des caractères qui ne sont pas pris en charge par la norme HTML (voir la question SO ici ), jQuery peut 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');

non.

Btw, la solution simple consistait à 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']);
user1435666
la source
5

Tout comme la plupart des gens l'ont dit, la principale différence est le fait qu'il est enveloppé dans un objet jQuery avec l'appel jQuery par rapport à l'objet DOM brut en utilisant directement du JavaScript. L'objet jQuery pourra faire d'autres fonctions jQuery avec lui bien sûr mais, si vous avez juste besoin de faire une manipulation DOM simple comme le style de base ou la gestion des événements de base, la méthode JavaScript directe est toujours un peu plus rapide que jQuery puisque vous ne le faites pas '' Je n'ai pas à charger dans une bibliothèque externe de code construite sur JavaScript. Il enregistre une étape supplémentaire.

Kobby
la source
5

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

var contents = $('#contents');

Les extraits de code ne sont pas les mêmes. le premier retourne un Elementobjet ( source ). Le second, équivalent jQuery, retournera 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 plusieurs éléments sont trouvés, seul le premier élément sera renvoyé.


Lors de la vérification du projet github pour jQuery, j'ai trouvé des extraits de ligne suivants qui semblent utiliser des 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] );
Nipuna
la source
4

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

En outre, getElementIdest appelé à partir du document, tandis que $('#...')peut être appelé à partir d'un sélecteur. Ainsi, dans le code ci-dessous, document.getElementById('content')retournera le corps entier mais $('form #content')[0]reviendra à 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 ID en double, mais si vous utilisez quelque chose comme Wordpress, un modèle ou un plugin peut utiliser le même identifiant que celui que vous utilisez dans le contenu. La sélectivité de jQuery pourrait vous aider.

steve banks
la source
2

jQuery est construit sur JavaScript. Cela signifie que c'est juste javascript de toute façon.

document.getElementById ()

La méthode document.getElementById () renvoie l'élément qui a l'attribut ID avec la valeur spécifiée et renvoie 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 d'ID comme argument renvoie un objet jQuery contenant une collection de zéro ou d'un élément DOM. Chaque valeur d'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 qui utilisent cet ID sélectionneront uniquement le premier élément correspondant dans le DOM.

Hadi Mir
la source
1

J'ai développé une base de données noSQL pour stocker les arbres DOM dans les navigateurs Web où les références à tous les éléments DOM sur 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 à la page, la base de données attribue des clés primaires de substitution à chaque élément. Il s'agit d'un outil gratuit http://js2dx.com

Gonki
la source
1

Toutes les réponses ci-dessus sont correctes. Dans le cas où vous souhaitez le voir en action, n'oubliez pas que vous avez la console dans un navigateur où vous pouvez voir le résultat réel d'une clarté cristalline:

J'ai un HTML:

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

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

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

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

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

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

Toutes les réponses sont anciennes aujourd'hui à partir de 2019, vous pouvez accéder directement aux fichiers d'identification à clé en javascript, essayez simplement

<p id="mytext"></p>
<script>mytext.innerText = 'Yes that works!'</script>

Démo en ligne! - https://codepen.io/frank-dspeed/pen/mdywbre

frank-dspeed
la source