Question document.getElementById vs jQuery $ ()


Est-ce:

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

La même chose que ceci:

var contents = $('#contents');

Étant donné que jQuery est chargé?


489
2017-11-01 14:53


origine


Réponses:


Pas exactement!!

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

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

En 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 se comportent comme des tableaux associatifs).

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

825
2017-11-01 14:56



Non.

Appel document.getElementById('id') retournera un objet DOM brut.

Appel $('#id') retournera 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 le $() appel.

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

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


111
2017-11-01 14:57



Fermer, mais pas la même chose. Ils obtiennent le même élément, mais la version de 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 sortiront l'élément de l'objet jQuery.


24
2018-03-19 16:56



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

Alternate commentant un, puis commenter l'autre. Dans mes tests,

document.getElementbyId moyenné environ 35 ms (fluctuant de 25ms Jusqu'à 52ms à propos de 15 runs)

D'un autre côté, le

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

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

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


16
2017-11-01 14:57



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 a été apparié.

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

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

Est plus équivilent, cependant si aucun élément avec l'id de contents est apparié, document.getElementById('contents') renverra null, mais $('#contents').get(0) retournera indéfini.

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


15
2017-11-01 14:56



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

$('#contents')[0] 

jQuery ne sait pas combien de résultats seront renvoyés à partir de la requête. Ce que vous obtenez 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 est que les méthodes MOST appelées sur cet objet qui ont l'air d'ê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


13
2017-09-18 16:21



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

Si l'ID contient des caractères non pris en charge par la norme HTML (voir la question SO ici) alors 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');

n'a pas fait.

Btw, le correctif simple était de déplacer cet id au champ de nom. JQuery n'a eu aucun mal à trouver l'élément en utilisant:

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

7
2017-11-01 15:01