Document Object Model
Descargar como PPTX, PDF0 recomendaciones476 vistas
El DOM permite manipular el contenido HTML de una página mediante JavaScript. Representa la página como un árbol de nodos en el que cada elemento es un nodo, con el nodo raíz siendo el elemento <html>. Se puede acceder y modificar cualquier nodo a través de su ID o mediante métodos como getElementById, getElementsByTagName, y manipulando las propiedades como innerHTML.
Document Object Model
- 1. El DOM sirve para exponer el contenido de la página HTML al motor de JavaScript y permitir de este modo su manipulación. Utilizando por ejemplo la tecnología AJAX podemos modificar el DOM a través de JavaScript para visualizar nuevos datos o elementos.
- 2. El DOM es una estructura en árbol. La raíz del árbol es el elemento <HTML>, el subárbol con la parte visible de la página cuelga del tag <BODY> que a su vez contiene otros tags como tablas, listas, párrafos, div’s etc,etc. Para acceder a este árbol desde JavaScript se utiliza la variable global document DOM es un estándar definido por el W3C http://www.w3.org/DOM/
- 3. Lo primero que debemos hacer antes de modificar un nodo es encontrarlo y obtener una referencia a el a través del objeto document. Todos los nodos son hijos de DOM. Se puede acceder a cualquiera de ellos recorriendo de modo recursivo el árbol. Sin embargo esta tarea es pesada, es más habitual acceder mediante el id.
- 4. En primer lugar en el HTML tenemos que indicar un atributo id único al nodo en cuestión: ◦ <div id=“nodo_a_obtener”/> Ahora podemos obtener una referencia a este nodo mediante el método getElementById del objeto document ◦ var nodo = document.getElementById(“nodo_a_obtener”);
- 5. En ocasiones es posible que queramos navegar por el árbol en lugar de acceder directamente a un nodo especifico, para esto usaremos las propiedades: ◦ parentNode para acceder al nodo padre ◦ childNodes nos devuelve un JavaScript array con los nodos hijos.
- 6. También es posible acceder a los nodos mediante su nombre de tag a través del método: ◦ getElementsByTagName, ejemplo: document.getElementsByTagName("UL”): Nos devolvería un JavaScript Array con todos los nodos UL que existan en el documento.
- 7. Para crear un nuevo elemento usamos el método createElement ◦ var divNode=document.createElement("div"); Para crear un nodo de texto usaremos el método createTextNode ◦ var txtNode=document.createTextNode("some text");
- 8. Una vez que un nodo esta creado es necesario asociarlo al árbol DOM, esto lo podemos hacer a través del método appendChild ◦ divNode.appendChild(txtNode);
- 9. Una posibilidad es modificar el atributo classname a través del DOM ◦ divNode.classname = “mi_estilo” También es posible añadir estilos a uno nodo a través de la propiedad style, por ejemplo: ◦ divNode.style.border="solid green 2px"; ◦ divNode.style.width="200px";
- 10. Otra alternativa para crear nodos en un árbol DOM y que en ocasiones resulta más cómoda es la propiedad innerHTML Con esta propiedad se puede añadir un cadena con código HTML arbitrario a un nodo, ejemplo: ◦ divNode.innerHTML+= "<div class=‘mi_clase'>"+text+"</div>";