document.getElementById vs jQuery $()

Question

C'est ça :

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

La même chose que ça :

var contents = $('#contents');

Étant donné que jQuery est chargé ?

Answer 1

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 (rappelez-vous que les objets JavaScript agissent comme des tableaux associatifs).

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

Answer 2

Non.

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

Appel à $('#id') renvoie un objet jQuery qui englobe l'objet DOM et fournit des méthodes jQuery.

Ainsi, vous pouvez seulement appeler des méthodes jQuery comme css() o animate() sur le $() appeler.

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

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

Answer 3

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

L'équivalent serait le suivant

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

ou ceci

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

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

Answer 4

Non. La première renvoie un élément DOM, ou null, alors que la seconde 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 le .innerHTML (o .value ), etc., mais vous devrez utiliser la fonction Méthodes jQuery sur l'objet jQuery.

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

est plus équivoque, cependant si aucun élément avec l'id de contents est apparié, document.getElementById('contents') retournera 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'est renvoyé, car un objet est toujours renvoyé. Cependant, vous obtiendrez des erreurs si vous essayez d'effectuer des opérations sur l'objet null retourné par document.getElementById

Answer 5

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 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 seul 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