Document Object Model
•Descargar como PPTX, PDF•
0 recomendaciones•467 vistas
Document Object Model
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (16)
Similar a Document Object Model
Similar a Document Object Model (20)
Más de Jorge Alberto Lorenzo Losada
Más de Jorge Alberto Lorenzo Losada (20)
Último
Último (16)
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>";