object jQuery e elemento DOM

Eu gostaria de entender o relacionamento entre o object jQuery e o elemento DOM.

Quando o jQuery retorna um elemento, ele aparece como [object Object] em um alerta. Quando getElementByID retorna um elemento, ele é mostrado como [object HTMLDivElement] . O que isso significa exatamente? Quero dizer, ambos são objects com uma diferença?

Além disso, quais methods podem operar no object jQuery vs elemento DOM? Um único object jQuery pode representar vários elementos DOM?

Eu gostaria de entender o relacionamento entre o object jQuery e o elemento DOM

Um object jQuery é um object do tipo array que contém elementos DOM. Um object jQuery pode conter vários elementos DOM, dependendo do seletor usado.

Além disso, quais methods podem operar no object jQuery vs elemento DOM? Um único object jQuery pode representar vários elementos DOM?

As funções jQuery (uma lista completa está no site) operam em objects jQuery e não em elementos DOM. Você pode acessar os elementos DOM dentro de uma function jQuery usando .get() ou acessando o elemento diretamente no índice desejado:

 $("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 

Em outras palavras, o seguinte deve obter o mesmo resultado:

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

Para mais informações sobre o object jQuery, consulte a documentação . Também confira a documentação para .get()

Quando você usa o jQuery para obter um elemento DOM, o object jQuery retorna contém uma referência ao elemento. Quando você usa uma function nativa como getElementById , obtém a referência ao elemento diretamente, não contida em um object jQuery.

Um object jQuery é um object do tipo array que pode conter vários elementos DOM:

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

A linha acima pode ser executada sem o jQuery:

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

Na verdade, é exatamente isso que o jQuery fará internamente quando você passar um seletor simples como o div . Você pode acessar os elementos reais dentro de uma coleção jQuery usando o método get :

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

Quando você tem um elemento, ou conjunto de elementos, dentro de um object jQuery, você pode usar qualquer um dos methods disponíveis na API do jQuery, enquanto quando você tem o elemento raw, você só pode usar methods JavaScript nativos.

Eu mal comecei a jogar com o jQuery no mês passado, e eu tive uma pergunta semelhante correndo em minha mente. Todas as respostas que você recebeu até agora são válidas e pontuais, mas uma resposta muito precisa pode ser esta:

Digamos que você esteja em uma function, e para se referir ao elemento de chamada, você pode usar this , ou $(this) ; Mas qual é a diferença? Acontece que, quando você usa $(this) , você está envolvendo this dentro de um object jQuery. O benefício é que, uma vez que um object é um object jQuery, você pode usar todas as funções do jQuery nele.

É muito poderoso, já que você pode até envolver uma representação de string de elementos, var s = '

hello world

!' , dentro de um object jQuery apenas literalmente envolvendo-o em $ (): $(s) . Agora você pode manipular todos esses elementos com jQuery.

A maioria das Functions do membro jQuery não possui um valor de retorno, mas retorna o jQuery Object atual ou outro jQuery Object .


Assim,

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

retornará [object Object] , isto é, um jQuery Object que mantém a coleção que é o resultado da avaliação do seletor String ( "#id" ) em relação ao Document ,

enquanto ,

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

retornará [object HTMLDivElement] (ou de fato [object Object] no IE) porque / se o valor de retorno for um Element div .


Além disso, quais methods podem operar no object jQuery vs elemento DOM? (1) Um único object jQuery pode representar vários elementos DOM? (2)

(1) Há um host de Function de membro no jQuery que pertencem aos Object DOM. A melhor coisa a fazer imo é pesquisar a documentação da API do jQuery para uma Function relevante, uma vez que você tenha uma tarefa específica (como selecionar Node s ou manipulá-los).

  • documentação do jQuery

(2) Sim, um único jQuery Object pode manter uma lista de vários Element DOM. Existem várias Functions (como jQuery.find ou jQuery.each ) que se baseiam nesse comportamento de cache automático.

Isso é apenas o seu navegador sendo inteligente. Ambos são objects, mas DOMElements são objects especiais . O jQuery apenas envolve DOMElements em um object Javascript.

Se você deseja obter mais informações de debugging, recomendo ver ferramentas de debugging como o Firebug for Firefox e o inspetor integrado do Chrome (muito semelhante ao Firebug).