1

Estoy tratando de entender como funcionan Javascript y Jquery. Yo sé que esto:

var contenido = document.getElementById("contenido");
contenido.text("Hola desde Javascript");

Es lo mismo que esto:

var contenido = $("#contenido");
contenido.text("Hola desde Jquery");

Pero tengo entendido que esto:

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

Es igual a esto en Jquery:

var contenido = $("#contenido")[0];

Por qué me agrega el texto sin el [0] al final ? Y si lo agrego no me muestra el mensaje, por qué si es lo mismo? En que momentos tengo que usar el [0] al final, un ejemplo ?

1
  • 1
    El [] se utiliza siempre para los array, si le agregas el [0] y no t muestra cuando le mandas texto es porque él está buscando asignar un texto a ese elemento el cual no existe en la vista porque tendrías a trabajarlo como array. Haz un "console.debug(contenido)" para q veas el elemento como lo está tratando. No t coloco ejemplo porque te estoy respondiendo desde mi celular. Disculpa.
    – bypabloc_
    Commented el 22 ene. 2017 a las 21:30

4 respuestas 4

3

En el siguiente ejemplo verás que no es lo mismo.

console.log($('#contenido') === document.getElementById('contenido') ); // false

console.log($('#contenido')[0] === document.getElementById('contenido') ); // true

console.log($('#contenido').get(0) === document.getElementById('contenido') ); // true
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contenido"></div>

Y se debe porque jQuery devuelve un array.

Si usas [0] o .get() tienes acceso al DOM Node.

Ejemplos prácticos:

$('#contenido1').text('si funciona 1');

$('#contenido2').get(0).innerText = 'si funciona 2';

$(document.getElementById('contenido3')).text('si funciona 3');


// los proximos ejemplos no funcionan

$('#contenido').get(0).text('no funciona');

document.getElementById('contenido4').text('no funciona');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contenido1"></div>
<div id="contenido2"></div>
<div id="contenido3"></div>
<div id="contenido4"></div>

1

El método $() de jQuery devuelve un objeto dependiendo del parámetro que se le pase. Esto quiere decir que si le pasas un ID como selector únicamente te devolverá un objeto, ya que los ID en HTML no se pueden repetir. En cambio, si al método $() le pasas una clase o una etiqueta, al ser selectores que pueden repetirse, te devolverá un array con todos los objetos que correspondan con esa clase o esa etiqueta.

Te pongo un ejemplo:

index.html

<div id="header"></div>
<div class="miClase"></div>
<div class="miClase"></div>

scripts.js

$('#header').text('Hola'); // Devuelve un único objeto
$('.miClase').text('Mundo'); // Devuelve todos los objetos que tengan la clase indicada

/*
  Si quisiéramos aplicar el método text() solamente al primer elemento que tenga la clase
    miClase podríamos hacer referencia a él indicando su índice en el array que devuelve
    $('.miclase')
*/

$('.miClase')[0].text('Este es el primer div con .miClase');
1
  • Tengo un problema con lo que me explicó. Yo para acceder a todo el contenido de un formulario, tengo que ingresar $("#form")[0] para que funcione. O con JS, document.getElementById("form"). Por que tengo que ingresar ese [0] si solo tengo un solo formulario ? Además es un ID, por lo tanto es único.
    – fed
    Commented el 23 ene. 2017 a las 3:49
0

El [] se utiliza siempre para los array, si le agregas el [0] y no t muestra cuando le mandas texto es porque él está buscando asignar un texto a ese elemento el cual no existe en la vista porque tendrías a trabajarlo como array. Haz un "console.debug(contenido)" para q veas el elemento como lo está tratando. No t coloco ejemplo porque te estoy respondiendo desde mi celular. Disculpa.

0

Al hacer un selector de jQuery a un elemento del DOM, la librería, crear un Objeto jQuery, que encierra el [object HTML], inmediatamente ese objeto te expone una API a métodos más amigables y Cross Browser .offset(), .animate(), etc... Pero internamente está usando la misma API nativa Vanilla de Javascript.

Este objeto jQuery expone en el índice 0, la referencia al [object HTML], por si quieres ejecutar sobre el métodos de la API nativa de Javascript.

Te dejo un ejemplo:

var canvas = $('#canvas');
// error getContext() es un método de la API nativa,
// por lo tanto el objeto jQuery no tiene este método
var context = canvas.getContext('2d'); 

Solución:

var context = canvas[0].getContext('2d'); 

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.