Quelle est la différence entre un objet jQuery et un élément du DOM? La différence entre les deux .get() et .index()?
Je suis conduisent à cette question en essayant de comprendre la différence entre jQuery .get()
et .index()
, j'ai regardé sur le jQuery API et je ne comprends toujours pas quelle est la différence entre eux, peut-être que je ne suis pas la compréhension de la terminologie?
Quelle est la différence entre un objet jQuery et un élément du DOM? Et sont un élément du DOM et un nœud DOM la même chose? Sont-ils simplement <div>
et <a>
etc. est un nœud DOM/DOM élément juste une balise HTML?
EDIT: et n'est-ce pas le DOM de la structure de la page? <html><body>etc.</body></html>
?
OriginalL'auteur android.nick | 2011-08-04
Vous devez vous connecter pour publier un commentaire.
La
get
méthode est utilisée pour accéder aux éléments du DOM dans un objet jQuery:Dans cet exemple,
allDivs
sera un tableau contenant tous les éléments qui correspondent (dans ce cas, il contient tous lesdiv
élément dans le DOM).La
index
méthode retourne un entier qui indique la position de l'élément sélectionné par rapport à ses frères. Considérons le code HTML suivant:Et suivants jQuery:
Comme pour votre autre question, un nœud DOM est à peu près tout dans les DOM. Les éléments sont des types de nœuds (de type 1). Vous avez aussi, par exemple, les nœuds de texte (type 3). Un élément est à peu près n'importe quelle balise.
À clarifier cela, considérons le code HTML suivant:
Et suivants JS:
Qui va imprimer:
Vous pouvez trouver une liste des types de nœuds ici. Pour une excellente introduction à ce que le DOM est en fait, voir ce MDN article
OriginalL'auteur James Allardice
HTML != DOM != Javascript != jQuery, mais ils sont tous étroitement liés.
Le navigateur reçoit un document HTML à partir d'un serveur web, qui est juste le texte. Le navigateur procède à analyser ce texte dans une structure interne qu'il peut utiliser pour rendre la page visuellement. Les DOM représente que la structure interne d'un navigateur dispose d'un document HTML. Javascript (ou d'autres méthodes) peuvent être utilisés pour manipuler le DOM, qui à son tour modifie le visuel rendre de la page. Un nœud DOM et d'un élément du DOM sont deux noms pour la même chose. Un élément du DOM représente un visuel ou d'un élément fonctionnel sur la page qui a été créé à partir de l'original du document HTML.
jQuery maintenant est une bibliothèque Javascript qui permet de manipuler le DOM de plus simple avec Javascript et en offrant un certain nombre de commodité raccourcis. Un objet jQuery est un objet Javascript, ce qui peut ou peut ne pas avoir quelque chose à voir avec le DOM (en général, il n'). Un objet jQuery est une commodité wrapper autour d'un élément du DOM en Javascript qui est une méthode pour manipuler le DOM qui est une représentation de la page qui a été créé à partir d'un fichier HTML.
Espère que ça aide. :o)
OriginalL'auteur deceze
Une façon j'ai bien aimé le regarder quand j'ai commencé avec jQuery est quelque chose comme cela (et ouais, je sais que tout n'est pas tout à fait correct, mais ils ont travaillé comme des lâches analogies):
Des éléments du DOM sont les noeuds dans votre document HTML que vous obtenez avec la vanille Javascript. Quelque chose comme
var foo = document.getElementById('bar')
vous obtient les raw d'un élément du DOM.jQuery wrapper objets (pour une grosse partie de jQuery développement) est en fait un tout nouvel objet qui contient un élément du DOM. Et c'est fondamentalement, un conteneur. C'est ce que vous obtenez avec quelque chose comme
$('#bar')
et c'est ce que vous obtenez ainsi par serrage dans un élément du DOM comme$(foo)
. Ces activer les différentes fonctionnalités jQuery sur votre objets DOM --- stuff normalement, ils n'auraient pas s'ils étaient simplement des objets DOM.Bâtiment de sur ce, la différence entre
.get()
et.index()
est assez facile..get(n)
renvoie lanth
élément du DOM jQuery objet wrapper. Quelque chose comme$('input').get(0)
vous donne la première<input>
élément dans le DOM comme si vous l'avez appelédocument.getElementById()
(ou quelque chose de similaire)..eq(n)
fait quelque chose de similaire, mais renvoie un jQuery wrapper objet contenant l'élément DOM à la place..index()
vous donne juste ce que la position d'un élément particulier dans un jQuery objet wrapper. Cela fonctionne un peu comme la façon dont vous vous attendez à eux de travailler dans des tableaux et d'autres collections.OriginalL'auteur Richard Neil Ilagan
Je sais que ce n'est pas une explication, comme tel, d'autres ont fait un très bon travail ici. Mais je pense que les visuels peut vous en dire beaucoup plus.
Obtenir Safari/Chrome (et leurs développeur menus) ou Firefox avec firebug et avoir un regard sur la façon dont ces outils de programmation web de représenter visuellement les choses que vous voulez savoir sur.
Par exemple les DOM "Document Object Model" tout est dit, mais tu ne comprends pas la relation entre les objets (les éléments) dans le document (page html), sauf si vous considérez que c'est comme une hiérarchie. Ces toold vous permettent de naviguer dans la hiérarchie judicieusement visuelle.
De même, ils contiennent également des outils d'évaluation qui vous permet de taper le nom de l'objet javascript pour voir ce qu'il contient.
Une fois que vous avez joué avec cela, vous aurez l'idée de ce qu'est un document d'objet, et un objet javascript.
Pour répondre à la question cependant
.get()
obtient l'élément et vous permet d'interagir directement avec elle sans avoir à naviguer dans le DOM de la hiérarchie par programmation, tandis que.index()
, juste trouve l'index de sa position au sein de la hiérarchieOriginalL'auteur T9b
À mon avis, le code
$('div').get()
est un objet Jquery avec un paramètre qui est une div-sélecteur. Sur cet objet le
get()
est appelé. Vous pourriez aussi considérer ce Paramètre comme unconstructor
(comme en orienté objet les langues) argument, parce qu'un nouvel objet est créé.OriginalL'auteur Timo
Élément du DOM du navigateur texte rendu
objet jquery vous obtenu par l'utilisation de ce code
var objet={}
console.log(objet);
OriginalL'auteur user1620882
DOM n'est pas la structure de la page comme ci-dessous
DOM n'est qu'un représentation de la page
Grosso modo, DOM est une sorte de Langage de Programmation Orienté Objet, ce qui vous permet d'accéder et de manipuler sur le document lui-même.
Pour être plus précis, DOM est une interface plutôt qu'un langage de programmation et qu'elle est indépendante de la langue. Il est arrivé à être inclus dans le code Javascript.
OriginalL'auteur bombs