Document Object Model
10
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. Document Object Model
-
Upload
jorge-alberto-lorenzo-losada -
Category
Technology
-
view
188 -
download
0
Transcript of Document Object Model
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.
Document Object Model
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/
Document Object Model
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.
DOM: Buscando nodos
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”);
DOM: Buscando nodos
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.
DOM: Navegando el árbol
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.
DOM: Accediendo por tag
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");
DOM: Creando nodos
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);
DOM: Creando nodos
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";
DOM: Aplicando estilos
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>";
DOM: propiedad InnerHTML
