Autor Tema: JS Basico: Accediendo a los elementos y sus atributos  (Leído 776 veces)

Desconectado westwest

  • PHPero Master
  • ******
  • Mensajes: 2.837
  • Karma: 104
  • Sexo: Masculino
    • Ver Perfil
JS Basico: Accediendo a los elementos y sus atributos
« en: 12 de Noviembre de 2009, 22:31:28 pm »
JavaScript trabaja con objetos, no os asusteis, es mas sencillo que PHP.
Cada objeto es un ELEMENTO, cada div, cada input, el BODY...

Para usarlos se almacenan en una variable. Se puede acer de varias maneras.

1º Usarlo directamente:
si en un input keremos vaciarlo:
Código: [Seleccionar]
<input onclick="this.value='';">
THIS es el input en cuestion, THIS puede enviarse a una funcion usando onclick="funcion(this);", en la funcion tenemos ya el objeto!

2º Llamarlo a mano...

Para ello podemos usar el mas usado, getElementById:
Como su nombre indica, coge un elemento segun su id:
var mielemento = document.getElementById('jiji');
obtendriamos el elemento con ID jiji

Tambien podemos usar getElementsByTagName:
Este devuelve un array:
var divsdelapagina = document.getElementsByTagName('div');
obtendriamos los div de la pagina, y accederiamos por la variable:
divsdelapagina[0], divsdelapagina[1]... etc

os preguntareis, ¿Por que pongo document?
porque cogemos los elementos del DOCUMENTO, pero podemos obtenerlo desde otro elemento.
Por ejemplo, queremos coger los input de un form, lo ariamos asi:

Código: [Seleccionar]
var miform = document.getElementById('miform');
var inputs = miform.getElementsByTagName('input');

¿Entendido?, espero k si


Ahora accedamos a sus atributos
En js, todo va asi:
algo.subalgo.subsubalgo

Para acceder al valor de un input:
Código: [Seleccionar]
<input onclick="alert(this.value);">

Al darle click al input mostraria una alerta con su valor

Cada elemento diferente (div, input...) tiene sus atributos, y hay algunos comunes claro...

Aki acaba el tuto, sabiendo esto, ya podeis acer casi de todo en JS!!

Salu2
« Última modificación: 14 de Noviembre de 2009, 20:19:28 pm por westwest »

Comunidad PHPeros

JS Basico: Accediendo a los elementos y sus atributos
« en: 12 de Noviembre de 2009, 22:31:28 pm »

Desconectado TheGeorge

  • PHPero Avanzado
  • ****
  • Mensajes: 351
  • Karma: 13
  • Sexo: Masculino
    • Ver Perfil
    • websources
Re:JS Basico: Accediendo a los elementos y sus atributos
« Respuesta #1 en: 14 de Noviembre de 2009, 16:44:42 pm »
Te ganastes un karma + westwest...

Bien explicado  ;)
Hay algo que no entendi...
Cita de: westwest
os preguntareis, ¿Por que pongo document?
porque cogemos los elementos del DOCUMENTO, pero podemos obtenerlo desde otro elemento.
Por ejemplo, queremos coger los input de un form, lo ariamos asi:
En el code que tu pusistes:
var miform = document.getElementById('miform');
var inputs = document.getElementsByTagName('input');

Para obtener los input de un form específico.
Prmero se saca el form de esto:
var miform = document.getElementById('miform');
Y despues con esto no se estarian sacando todos los input del documento?
var inputs = document.getElementsByTagName('input');

Espero haberme entendido.
sldos
¡Solo sé, que nada sé...!

Desconectado westwest

  • PHPero Master
  • ******
  • Mensajes: 2.837
  • Karma: 104
  • Sexo: Masculino
    • Ver Perfil
Re:JS Basico: Accediendo a los elementos y sus atributos
« Respuesta #2 en: 14 de Noviembre de 2009, 20:19:13 pm »
Hay me ekivoke yo xD

el tema es k sea

var miform = document.getElementById('miform');
var inputs = miform.getElementsByTagName('input');

Para sacar los inputs desde el form (miform.get...)

Ahora mismo lo corrijo

Desconectado Siquillote

  • PHPero Master
  • ******
  • Mensajes: 4.229
  • Karma: 179
  • Sexo: Masculino
    • Ver Perfil
Re:JS Basico: Accediendo a los elementos y sus atributos
« Respuesta #3 en: 15 de Noviembre de 2009, 12:13:50 pm »
Como de costumbre un Karma :) Macho eres un maquinote xDD. Buenisimo el tuto , ahora mismo me pongo a practicarlo

#Fdo. Physlet

Desconectado x.mara.x

  • PHPero Master
  • ******
  • Mensajes: 1.364
  • Karma: 57
  • Sexo: Femenino
    • Ver Perfil
Re:JS Basico: Accediendo a los elementos y sus atributos
« Respuesta #4 en: 13 de Diciembre de 2009, 12:46:18 pm »
+karma west (que raro) lo has explicado muy bien. si bien entendi. esta seria la comparacion php mysql - js

mysql_query("SELECT..") = document.getElementById('miform');
$row = mysql_fetch_array(...)
$row['input'] = miform.getElementsByTagName('input');
?

Desconectado westwest

  • PHPero Master
  • ******
  • Mensajes: 2.837
  • Karma: 104
  • Sexo: Masculino
    • Ver Perfil
Re:JS Basico: Accediendo a los elementos y sus atributos
« Respuesta #5 en: 13 de Diciembre de 2009, 15:38:25 pm »
Como que "que raro"???? >:(

Y no intenteis compararlo con otro lenguaje, que eso lo unico que hace es liar

Desconectado x.mara.x

  • PHPero Master
  • ******
  • Mensajes: 1.364
  • Karma: 57
  • Sexo: Femenino
    • Ver Perfil
Re:JS Basico: Accediendo a los elementos y sus atributos
« Respuesta #6 en: 13 de Diciembre de 2009, 17:30:10 pm »
estaba siendo sarcastica :p