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é?

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

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].

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.

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 .

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

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

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']);

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.

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

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.

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.

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

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

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