document.getElementById vs jQuery $()

Pas de.

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

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

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

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

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

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

L'équivalent serait ce

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

ou ce

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

Ces tirez l'élément de l'objet jQuery.

note sur la différence de vitesse. Joindre 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));
}

alternent en commentant l'un et puis commentent l'autre. Dans mes épreuves,

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

d'autre part, le

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

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

bien sûr, c'est fini 10000 itérations donc dans une situation plus simple, je voudrais probablement utiliser le jQuery pour la facilité d'utilisation et toutes les autres choses fraîches comme .animate et .fadeTo . Mais oui, techniquement getElementById est un peu plus rapide .

Pas de. La première renvoie un élément DOM, ou null, tandis que la seconde renvoie toujours un objet jQuery. L'objet jQuery sera vide si aucun élément avec l'id de contents a été trouvée.

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

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

est plus equivilent, cependant si aucun élément avec l'id de contents n'est apparié, document.getElementById('contents') retournera null, mais $('#contents').get(0) retournera Non défini.

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

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

$('#contents')[0] 

jQuery ne sait pas combien de résultats seraient retournés à partir de 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 commode est que la plupart des méthodes appelées sur cet objet qui ressemblent ils sont destinés à un contrôle, sont en fait dans une boucle appelée sur tous les membres dans le collection

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

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

si l'id contient des caractères qui ne sont pas supportés par la norme HTML (voir la question ici ) alors jQuery peut ne pas le trouver même si getElementById le fait.

cela m'est arrivé avec un id contenant " / " 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.

Btw, la solution simple était de déplacer cette id dans le champ Nom. JQuery n'a pas eu de mal à trouver l'élément en utilisant:

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

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 vs l'objet DOM brut en utilisant JavaScript droit. L'objet jQuery sera en mesure de faire d'autres fonctions jQuery avec, bien sûr, mais, si vous avez juste besoin de faire une manipulation DOM simple comme le style de base ou la manipulation d'événement de base, la méthode JavaScript droite est toujours un peu plus rapide que jQuery puisque vous n'avez pas à charger dans une bibliothèque externe de code construit sur le JavaScript. Il enregistre une étape supplémentaire.

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

var contents = $('#contents');

les bribes de code ne sont pas les mêmes. le premier renvoie un objet Element ( source ). Le second, jQuery equivalent retournera un objet jQuery contenant une collection de zéro ou un élément DOM. ( jQuery documentation ). JQuery interne utilise document.getElementById() pour l'efficacité.

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

lors de la vérification du projet github pour jQuery j'ai trouvé suivant des bribes de ligne qui semblent utiliser le document.getElementById codes ( https://github.com/jquery/jquery/blob/master/src/core/init.js à partir de la ligne 68)

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

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

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') retournera 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>

It 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 id que vous utilisez dans le contenu. La sélectivité de jQuery pourrait vous aider.

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 les éléments dans DOM tree sont instanciés sur la page, la base de données affecte des clés primaires de substitution à chaque élément. C'est un outil gratuit http://js2dx.com