web-dev-qa-db-fra.com

Objet jQuery et élément DOM

Je voudrais comprendre la relation entre l'objet jQuery et l'élément DOM ..

Lorsque jQuery renvoie un élément, il apparaît comme [object Object] dans une alerte. Lorsque getElementByID renvoie un élément, il apparaît comme [object HTMLDivElement]. Qu'est-ce que ça veut dire exactement? Je veux dire, les deux sont-ils des objets avec une différence?

Quelles méthodes peuvent également fonctionner sur un objet jQuery contre un élément DOM? Un seul objet jQuery peut-il représenter plusieurs éléments DOM?

javascriptdomjquery
73
testndtv

Je voudrais comprendre la relation entre l'objet jQuery et l'élément DOM

Un objet jQuery est un objet de type tableau qui contient des éléments DOM. Un objet jQuery peut contenir plusieurs éléments DOM en fonction du sélecteur que vous utilisez.

Quelles méthodes peuvent également fonctionner sur un objet jQuery contre un élément DOM? Un seul objet jQuery peut-il représenter plusieurs éléments DOM?

les fonctions jQuery (une liste complète est sur le site) fonctionnent sur les objets jQuery et non sur les éléments DOM. Vous pouvez accéder aux éléments DOM à l'intérieur d'une fonction jQuery en utilisant .get() ou accéder directement à l'élément à l'index souhaité:

$("selector")[0] // Accesses the first DOM element in this jQuery object
$("selector").get(0) // Equivalent to the code above
$("selector").get() // Retrieve a true array of DOM elements matched by this selector

En d'autres termes, les éléments suivants devraient vous donner le même résultat:

<div id="foo"></div>

alert($("#foo")[0]);
alert($("#foo").get(0));
alert(document.getElementById("foo"));

Pour plus d'informations sur l'objet jQuery, voir la documentation . Consultez également la documentation pour .get()

92
Andrew Whitaker

Lorsque vous utilisez jQuery pour obtenir un élément DOM, l'objet jQuery renvoie contient une référence à l'élément. Lorsque vous utilisez une fonction native comme getElementById, vous obtenez directement la référence à l'élément, non contenue dans un objet jQuery.

Un objet jQuery est un objet de type tableau qui peut contenir plusieurs éléments DOM:

var jQueryCollection = $("div"); //Contains all div elements in DOM

La ligne ci-dessus pourrait être effectuée sans jQuery:

var normalCollection = document.getElementsByTagName("div");

En fait, c'est exactement ce que jQuery fera en interne lorsque vous passez dans un simple sélecteur comme div. Vous pouvez accéder aux éléments réels d'une collection jQuery à l'aide de la méthode get:

var div1 = jQueryCollection.get(0); //Gets the first element in the collection

Lorsque vous avez un élément, ou un ensemble d'éléments, à l'intérieur d'un objet jQuery, vous pouvez utiliser l'une des méthodes disponibles dans l'API jQuery, tandis que lorsque vous avez l'élément brut, vous ne pouvez utiliser que des méthodes JavaScript natives.

13
James Allardice

Je viens à peine de commencer à jouer avec jQuery le mois dernier et j'avais une question similaire en tête. Toutes les réponses que vous avez reçues jusqu'à présent sont valables et précises, mais une réponse très précise peut être la suivante:

Disons que vous êtes dans une fonction, et pour faire référence à l'élément appelant, vous pouvez utiliser this ou $(this); Mais quelle est la différence? Il s'avère que lorsque vous utilisez $(this), vous enveloppez this dans un objet jQuery. L'avantage est qu'une fois qu'un objet est un objet jQuery, vous pouvez utiliser toutes les fonctions jQuery dessus.

C'est assez puissant, car vous pouvez même envelopper une représentation sous forme de chaîne d'éléments, var s = '<div>hello <a href='#'>world</a></div><span>!</span>', À l'intérieur d'un objet jQuery simplement en l'enveloppant littéralement dans $ (): $(s). Vous pouvez maintenant manipuler tous ces éléments avec jQuery.

9
rkw

La plupart des membres jQuery Functions n'ont pas de valeur de retour mais renvoient plutôt le jQuery Object ou un autre jQuery Object.

Alors,

console.log("(!!) jquery >> " + $("#id") ) ;

renverra [object Object], c'est-à-dire un jQuery Object qui gère la collection résultant de l'évaluation du sélecteur String ("#id") contre le Document,

tandis que ,

console.log("(!!) getElementById >> " + document.getElementById("id") ) ;

renverra [object HTMLDivElement] (ou en fait [object Object] dans IE) car/si la valeur de retour est un divElement.

Quelles méthodes peuvent également fonctionner sur un objet jQuery contre un élément DOM? (1) Un seul objet jQuery peut-il représenter plusieurs éléments DOM? (2)

(1) Il existe un hôte de membres Functions dans jQuery qui appartiennent à DOM Objects. La meilleure chose à faire imo est de rechercher dans la documentation de l'API jQuery un Function pertinent une fois que vous avez une tâche spécifique (telle que sélectionner Nodes ou les manipuler).

(2) Oui, un seul jQuery Object peut conserver une liste de plusieurs DOM Elements. Il existe plusieurs Functions (tels que jQuery.find ou jQuery.each) qui s'appuient sur ce comportement de mise en cache automatique.

5
FK82

C'est juste que votre navigateur est intelligent. Ce sont deux objets mais les DOMElements sont des objets spéciaux. jQuery enveloppe simplement les DOMElements dans un objet Javascript.

Si vous souhaitez obtenir plus d'informations de débogage, je vous recommande de consulter les outils de débogage comme Firebug pour Firefox et l'inspecteur intégré de Chrome (très similaire à Firebug).

2
Halcyon

Outre ce qui a été mentionné, je voudrais ajouter quelque chose sur la raison pour laquelle l'objet jQuery est importé conformément à la description de jquery-object

  • Compatibilité

L'implémentation des méthodes d'élément varie selon les fournisseurs de navigateur et les versions.

Par exemple, set innerHTML de l'élément peut ne pas fonctionner dans la plupart des versions d'Internet Explorer.

Vous pouvez définir innerHTML de manière jQuery et jQuery vous aidera à masquer les différences de navigateur.

// Setting the inner HTML with jQuery.

var target = document.getElementById( "target" );

$( target ).html( "<td>Hello <b>World</b>!</td>" );
  • Commodité

jQuery fournit une liste de méthodes liées à l'objet jQuery pour faciliter l'expérience du développeur, veuillez en vérifier certaines sous http://api.jquery.com/ . Le site Web fournit également une manipulation DOM courante, voyons comment insérer un élément stocké dans newElement après l'élément target dans les deux sens.

La façon DOM,

// Inserting a new element after another with the native DOM API.

var target = document.getElementById( "target" );

var newElement = document.createElement( "div" );

target.parentNode.insertBefore( newElement, target.nextSibling );

La manière jQuery,

// Inserting a new element after another with jQuery.

var target = document.getElementById( "target" );

var newElement = document.createElement( "div" );

$( target ).after( newElement );

J'espère que c'est un supplément.

0
Gearon