Tutorial DOM html javascript

por | Feb 26, 2009 | AJAX, Otros | 2 Comentarios

¿Qué es DOM?

Si estas interesado en hacer páginas con ajax, generar elementos dinamicamente entonces requieres usar DOM (Document Object Model), lo que podemos traducir como «Modelo en Objetos para la representación de Documentos» si lo se hasta ahi no suena a nada. Traduciendolo nuestras páginas HTML tienen un conjunto de elementos, graficos, texto, formularios, etiquetas, DOM lo que busca es que estos elementos tengan una estructura estandard que permita manipularlos usando javascript (ajax).
Por ejemplo si tengo un formulario usando dom podria validarlo, o podrias hacer que al elegir una opcion de un combo aparezcan nuevos campos, etc, etc.

Ejemplo uso de DOM

Voy a hacer un pequeño script que automaticamente busque el primer campo del formulario y lo seleccione automaticamente al cargar la pagina:

1
2
3
4
5
<form name="frmNewCargo" id="frmNewCargo" method="post" action="reg_cargo.jsp" onSubmit="return validar(this);">
  <input type="text" name="idcargo" id="idcargo" size="5">
  <input type="text" name="nomcar" id="nomcar" size="40">
  <input type="text" name="min" id="min" size="10">
</form>

Y ahora el script debemos llamarlo al cargar, la pagina, ojo este script funciona con cualquier formulario, basta enviarle a la funcion el nombre de formulario correcto

1
<body onLoad="javascript:enfoca_primero('frmNewCargo');">

Nuestra funcion para detectar el primer campo sería

1
2
3
4
5
function enfoca_primero($cual) {
    var frm=document.getElementById($cual);
    var arr_input=frm.getElementsByTagName("input");
    arr_input[0].focus();
}

2 Comentarios

  1. usuario
    usuario el junio 15, 2010 a las 11:33 pm

    Perfecto, me sirvio de mucha ayuda. gracias.. es interesante totalmente lo del DOM en javascript..

    Saludos dese Perú

  2. Miguel Manchego
    Miguel Manchego el junio 16, 2010 a las 8:58 am

    Saludos desde la República Independiente de AQP 🙂