Taller de Programación DOM Javascript

Una serie de artículos prácticos con temas acerca de la programación Javascript, focalizada en el DOM (Document Object Model) o la jerarquía de objetos que el navegador construye para cada página.

Si te parece útil este manual ayúdanos compartiendo!! :)

1.- Qué es el DOM

El DOM es la estructura de objetos que genera el navegador cuando se carga un documento y se puede alterar mediante Javascript para cambiar dinámicamente los contenidos y aspecto de la página.

2.- DOM y Compatibilidad con navegadores

Notas y recomendaciones sobre la compatibilidad de los distintos navegadores con el DOM de Javascript.

3.- Evento onreadystatechange de Internet Explorer

El evento onreadystatechange sirve para realizar acciones cuando cambia el estado de carga de la página o de un elemento de ella.

4.- Evento DOMContentLoaded de Firefox

El evento DOMContentLoaded de Firefox y navegadores Mozilla sirve para realizar acciones cuando el DOM ha terminado de cargar y se encuentra listo.

5.- DOM cargado y listo en Internet Explorer

Un truco en Internet Explorer para detectar el momento en el que el DOM está listo para trabajar y recibir instrucciones.

6.- Saber cuando el DOM está listo sin utilizar onload

Notas para ejecutar código Javascript solamente cuando el navegador está preparado porque el DOM está listo, pero de una manera más rápida que usar onload.

Compartir

Comentarios

Nigthscrawler

16/4/2009
Que Bueno
pues yo conosco poco de javascritp y mucho menos del DOM pero leyendo esto se ve que estara entretenido aprender este lenguaje

jos_gregorio_yzarra

09/11/2010
DOM
estoy empezando con javascript y me interesa el dom ya que he notado mucha incorporacionen paginas, muy bueno. Gracias

DBARONE

13/12/2010
Taller de programacion DOM Javascript
Seria BUENISIMO que se pudiera bajar

OmarK

17/5/2011
Hay mas talleres javascript?
Quisiera aprender sobre como utilizar:
document.createElement() y appendChild ()

andre_rivera2011

08/6/2011
gracias
todos los manuales son excelentes, gracias por todos los conocimientos.

candis

30/8/2012
dom
Acabo de comenzar y espero aprender lo bueno de todod esto

paco

13/3/2013
ejemplo
<script type="text/javascript">
function apartado1() {
var menu=document.getElementById("logo");
for (var i=0;i<menu.childNodes.length;i++) {
if (menu.childNodes[i].nodeName=="DIV") {
alert (menu.childNodes[i].firstChild.nodeValue);
}
}
}

function apartado2() {
var entrada=document.getElementsByTagName("input");
for (var i=0;i<entrada.length;i++) {
if (entrada[i].getAttribute("type")=="button") {
alert (entrada[i].getAttribute("value"));
}
}
}
function apartado4() {
var mif=document.getElementsByTagName("form")[0];
mif.firstChild.setAttribute("class","texto");
}
function apartado5 () {
var parrafo=document.createElement("p");
var texto=document.createTextNode("este parrafo es una prueba");
parrafo.appendChild(texto);
parrafo.setAttribute("id","miparrafo");
parrafo.setAttribute("class","texto");
var midiv=document.getElementById("sidebar");
for (var i=0;i<midiv.childNodes.length;i++) {
if (midiv.childNodes[i].nodeName=="HR") {
var nodohr=midiv.childNodes[i];
}
}
midiv.insertBefore(parrafo,nodohr);
}

function apartado7() {
var entrada=document.getElementById("sidebar2");
entrada.removeAttribute("id");
entrada.setAttribute("class","texto");
}
</script>