DOM, cuyo significado es Documento Object Model o en español Modelo de Objetos del Documento es lamentablemente un desconocido de muchos de los que realizan webs, aun de quienes programan webs.
A pesar de esto, esta presente desde 1995, gracias a Netscape, y seguido por Microsoft – Internet Explorer, pero hoy en día, presente en navegadores modernos como FireFox y Opera, entre otros.
Que es DOM ?
DOM es un API que brinda una interfaz a las aplicaciones webs para acceder a los elementos del documento, no solo para leer si no también para modificar su contenido. Pero, que significa esto ?, pues bueno es una forma de poder modificar desde JavaScript el HTML de nuestro sitio, aunque también se puede utilizar con otros lenguajes, la combinación mas conocida es la que menciono, y esta forma JavaScript y HTML vía DOM es muy utilizada en tecnologías como AJAX.
Ejemplo HTML, JavaScript y DOM ?
<html>
<head>
<script type="text/javascript">
<!--
document.getElementById("unparrafo").innerHTML =
"Hola, pero modificado con JavaScript + DOM";
//->
</script>
</head>
<body>
<p id="unparrafo">Hola</p>
</body>
</html>
Bien, hemos declarado un documento HTML, que comienza y finaliza con <html> y </html> respectivamente. Definimos una cabecera comenzando y finalizando con <header> y </header>, en esta cabecera definimos un script en javascript, que utiliza DOM para alterar el contenido de un párrafo de texto. Y en el cuerpo del HTML, que comienza con <body> y termina con </body> tenemos un párrafo definido por <p> y </p> pero que le hemos dado un nombre mediante id=»unparrafo», muy creativo el nombre de nuestro párrafo 🙂
Hemos dejado la linea de JavaScript, para explicar al final:
document.getElementById("unparrafo").innerHTML =
"Hola, pero modificado con JavaScript + DOM";
Utilizar DOM en JavaScript
document, es el objeto con que JavaScript nos permite acceder a todo nuestro HTML.
getElementById, nos permite seleccionar un objeto dentro de nuestro documento, para esto indicamos su nombre entre paréntesis.
innerHTML, es una propiedad que identifica el contenido de un objeto HTML de nuestro documento.
Si vemos nuestro párrafo inicial, solo dice Hola, de hecho si mostraríamos el HTML sin ningún JavaScript, solo imprimiría Hola. Pero nuestra linea de código JavaScript hace lo siguiente:
document.getElementById("unparrafo").innerHTML =
"Hola, pero modificado con JavaScript + DOM";
de nuestro document, selecciona unparrafo y le cambia su contenido para que sea igual a «Hola, pero modificado con JavaScript + DOM», y este texto, que esta entre comillas es el que muestra nuestro HTML.
Mas info sobre DOM:
http://www.w3.org/2005/03/DOM3Core-es/introduccion.html
