lunes, 31 de octubre de 2011

Acceder a elementos de una etiqueta html con JavaScript

Si bien esto suena sencillo, en Internet se confunde mucho. Tanto los documentos html como los xml funcionan a partir de "etiquetas", estas indican no solo el tipo de contenido sino también, permiten estructurar el documento en forma de árbol (La diferencia entre estos dos lenguajes y su utilizacion se escapan al contenido manual). Una etiqueta se estructura de la siguiente forma:

<nombre_tipo atributo="valor" evento="valor"> Contenido <\nombre_tipo>

Así en html las etiquetas representan un tipo definido de elemento con sus diferentes atributos o propiedades (estilo, nombre, identificador etc) y funciones o evento. En xml los tipos de etiquetas los define el diseñador, y se lo puede ver como una representacion de un objeto real y sus diferentes propiedades. Y los atributos son mas bien especificación (por ejemplo Una persona tiene nombre,apellido y teléfono. Este puede ser de tipo móvil o de casa). En caso de que se desee representar un "objeto html" se debe especificar dentro de etiquetas description el namespace, pero ese es otro tema.

Identificar un elemento.

Existen muchos tipos de etiquetas y cada una tiene un tipo definido de atributos, aquellas que no expresan el formato de texto, también pueden no incluir atributos. El problema surge cuando se quiere utilizar el contenido de ese elemento o sus propiedades. Por ello siempre es recomendable colocarle a las etiquetas html un atributo id="nombre_identificador". Y acá algo importante., los elementos del html se definen por un "name" y un "id", a esto hay que prestarle mucha atención ya que, Internet explorer confunde estos dos y en el caso de tener 2 etiquetas una con atributo "name" igual al "id" de otra etiqueta esto me daría un error. Por lo que recomiendo, directamente no utilizar name o que id y name tengan el mismo valor.


Llamar a un elemento
Cuando queremos "llamar" a un elemento a partir de un evento o un script en javascript, existen varios casos:

-Llamar un elemento dentro de si mismo: Para esto se utiliza el operado THIS, que indica que se va a referenciar atributos de si mismo, ejemplo
<div style="padding:valor" onclick="this.style.padding='valor_nuevo'"valor"> Contenido <\nombre_tipo>
En este ejemplo se crea una seccion y al hacer click se cambia su tamaño.

-Llamar a un elemento de mi documento: En caso de estar de utilizar JavaScript, simplemente se referencia utilizando document y para poder reconocerlo tenemos 3 formas.
document.getElementById('valor_id')
document.getElementByName('nombre')
document.getElementByTagName('nombre_tag')
Así obtendremos nuestro elemento html y podremos acceder a sus atributos.
El ejemplo anterior document.getElementById('pos').style.padding="nuevo_valor";

Algo a tener en cuenta: cuando queremos obtener el valor de por ejemplo un campo de texto debemos saber que dato se necesita realmente.
-Si inicializamos el campo con un contenido en particular ejemplo <imput type="text" id="campo" value="texto_inicial" > lo obtenemos..
var texto = document.getElementById('campo').getAttribute;
-Mientras que si queremos obtener los datos que se ingresan en el campo de texto sería..
var texto = document.getElementById('campo').value;

-Llamar a un elemento dentro de un form: Cuendo se tienen etiquetas dentro de un formulario, se puede referenciar el formulario para poder acceder al elemento. Por ejemplo teniendo:
<form name=nombre_formulario methodo=...> <imput name=nombre_campo type=text...>
Desde el javascript se llamaría:
var texto = document.nombre_formulario.nombre_campo.value;
Aclaracion: si se intenta obtener al comienzo de cargar la pagina va a dar error.

-Llamar a un elemento de otro frame: Supongamos que tenemos una pagina principal que tiene 2 frames (pueden ser mas), uno es <frame name="izquierda" src="izq.htm"> y el otro es <frame name="derecha" src="der.htm"> y queremos desde der.htm acceder a un elemento de izq.htm, simplemente lo referenciamos desde javascript de la siguiente forma:
top.nombre_frame.document.getElementById('valor_id')
ejemplo var texto= top.izquierda.document.getElementById('campo').value;

-Acceder a elementos en forma de arbol: Este tipo de métodos se creó básicamente para facilitar el recorrido de documentos xml, pero por su formato también es compatible con html.
Para esto se utiliza DOM (modelo de objeto de documento) implementado por varios lenguajes de programacion, permite obtener el documento como un conjunto de objetos. Para ello se obtiene el primer elemento, "nodo raíz"(en html como siempre se empieza por la etiqueta <html>) y se busca por nodo hijo. Un ejemplo sencillo..
<html>
<head>
<title>Titulo<\title>
<\head>
<body>
<\body>
<\html>

Si queremos ver los nodos hijo en JavaScript:
<script language="javascript">
//cargamos la raiz
var raiz = document.documentElement;
//obtenemos la cantidad de hijos
var cant = raiz.childNodes.length;
for(var i=0;i<=cant; i++){
//Escribir el nombre del nodo, en la posición "i"
//del conjunto de hijos de "raíz"
document.write(raiz.childNodes.item(i).nodeName+"<br>");
}
</script>


Esto devolvería "HEAD" y "BODY". Así, solo queda buscar el nodo que queremos y utilizar las propiedades anteriores como "getAttribute" etc.

No hay comentarios:

Publicar un comentario en la entrada