1 DOM Document Object Model
INTRODUCCIÓN Es un conjunto de utilidades específicamente diseñadas para manipular documentos XML. Por extensión, DOM también se puede utilizar para manipular documentos XHTML y HTML. Técnicamente, DOM es una API de funciones que se pueden utilizar para manipular las páginas XHTML de forma rápida y eficiente. La primera especificación de DOM (DOM Level 1) permitió homogeneizar la implementación del DHTML o HTML dinámico en los diferentes navegadores, ya que permitía modificar el contenido de las páginas web sin necesidad de recargar la página entera. El responsable del DOM es el consorcio W3C (World Wide Web Consortium). http://www.w3.org/dom/ Especificación del Modelo de Objetos del Documento (DOM), Nivel 1, en español: http://html.conclase.net/w3c/dom1-es/cover.html 2
VERSIONES La primera vez que el DOM se utilizó, fue con el navegador Netscape en su versión 2.0 Este DOM se conoce también como el modelo básico, o el DOM.Nivel 0. DOM.Nivel 1 (1998), en la cual se consideraron las características y manipulación de todos los elementos existentes en los archivos HTML y XML. DOM.Nivel 2 (2000), en esta especificación se incluyó la manipulación de eventos en el navegador, la capacidad de interacción con CSS, y la manipulación de partes del texto en las páginas de la web. DOM.Nivel 3 (2004), utiliza la DTD (Definición del tipo de documento) y la validación de documentos. 3
TIPOS DE NODOS Los documentos XML y HTML tratados por DOM se convierten en una jerarquía de nodos. Los nodos que representan los documentos pueden ser de diferentes tipos. Document: es el nodo raíz de todos los documentos HTML y XML. Todos los demás nodos derivan de él. DocumentType: es el nodo que contiene la representación del DTD empleado en la página (indicado mediante el DOCTYPE). Element: representa el contenido definido por un par de etiquetas de apertura y cierre (<etiqueta>...</etiqueta>) o de una etiqueta abreviada que se abre y se cierra a la vez (<etiqueta/>). Es el único nodo que puede tener tanto nodos hijos como atributos. Attr: representa el par nombre-de-atributo/valor. Text: almacena el contenido del texto que se encuentra entre una etiqueta de apertura y una de cierre. También almacena el contenido de una sección de tipo CDATA. CDataSection: es el nodo que representa una sección de tipo <![CDATA[ ]]>. Comment: representa un comentario de XML. 4
EJEMPLO <?xml version="1.0"?> <clientes> <!-- El primer cliente --> <cliente> <nombre>empresa SA</nombre> <sector>tecnologia</sector> <notas><![cdata[ Llamar la proxima semana ]]></notas> </cliente> </clientes> 5
INTERFAZ NODE CONSTANTES El objeto Node define las siguientes constantes para la identificación de los distintos tipos de nodos: Node.ELEMENT_NODE = 1 Node.ATTRIBUTE_NODE = 2 Node.TEXT_NODE = 3 Node.CDATA_SECTION_NODE = 4 Node.ENTITY_REFERENCE_NODE = 5 Node.ENTITY_NODE = 6 Node.PROCESSING_INSTRUCTION_NODE = 7 Node.COMMENT_NODE = 8 Node.DOCUMENT_NODE = 9 Node.DOCUMENT_TYPE_NODE = 10 Node.DOCUMENT_FRAGMENT_NODE = 11 Node.NOTATION_NODE = 12 6
INTERFAZ NODE PROPIEDADES Y MÉTODOS (I) Propiedad/Método Valor devuelto Descripción nodename String El nombre del nodo (no está definido para algunos tipos de nodo) nodevalue String El valor del nodo (no está definido para algunos tipos de nodo) nodetype Number Una de las 12 constantes definidas anteriormente ownerdocument Document Referencia del documento al que pertenece el nodo firstchild Node Referencia del primer nodo de la lista childnodes lastchild Node Referencia del último nodo de la lista childnodes childnodes NodeList Lista de todos los nodos hijo del nodo actual previoussibling Node Referencia del nodo hermano anterior o null si este nodo es el primer hermano 7
INTERFAZ NODE PROPIEDADES Y MÉTODOS (II) Propiedad/Método Valor devuelto Descripción nextsibling Node Referencia del nodo hermano siguiente o null si este nodo es el último hermano haschildnodes() Bolean Devuelve true si el nodo actual tiene uno o más nodos hijo attributes NamedNodeMap Se emplea con nodos de tipo Element. Contiene objetos de tipo Attr que definen todos los atributos del elemento appendchild(nodo) Node Añade un nuevo nodo al final de la lista childnodes removechild(nodo) Node Elimina un nodo de la lista childnodes replacechild(nuevonodo, anteriornodo) insertbefore(nuevonodo, anteriornodo) Node Node Reemplaza el nodo anteriornodo por el nodo nuevonodo Inserta el nodo nuevonodo antes que la posición del nodo anteriornodo dentro de la lista childnodes 8
HTML Y DOM Firefox y Safari implementan DOM de nivel 1 y 2 (y parte del 3), otros navegadores como Internet Explorer (versión 7 y anteriores) ni siquiera son capaces de ofrecer una implementación completa de DOM nivel 1. Los métodos y propiedades incluidas en la tabla anterior son específicos de XML, aunque pueden aplicarse a todos los lenguajes basados en XML, como por ejemplo XHTML. Para las páginas creadas con HTML, los navegadores hacen como si HTML estuviera basado en XML y lo tratan de la misma forma. No obstante, se han definido algunas extensiones y particularidades específicas para XHTML y HTML. Cuando se utiliza DOM en páginas HTML, el nodo raíz de todos los demás se define en el objeto HTMLDocument. Además, se crean objetos de tipo HTMLElement por cada nodo de tipo Element del árbol DOM. El objeto document es parte del BOM (Browser Object Model), aunque también se considera que es equivalente del objeto Document del DOM de los documentos XML. Por este motivo, el objeto document también hace referencia al nodo raíz de todas las páginas HTML. 9
HTML DOM Las modificaciones en el árbol de nodos DOM sólo se pueden realizar cuando toda la página web se ha cargado en el navegador. El motivo es que los navegadores construyen el árbol de nodos DOM una vez que se ha cargado completamente la página web. Cuando una página no ha terminado de cargarse, su árbol no está construido y por tanto no se pueden utilizar las funciones DOM. Si una página realiza modificaciones automáticas (sin intervención del usuario) es importante utilizar el evento onload() para llamar a las funciones de JavaScript. 10
ACCESO A NODOS Obtener el elemento raíz de la página: var objeto_html = document.documentelement; (<html>) Obtener el elemento <head> y <body>: var objeto_head = objeto_html.firschild; var objeto_body = objeto_html.lastchild; var objeto_head = objeto_html.childnodes[0]; var objeto_body = objeto_html.childnodes[1]; Obtener el elemento directamente: var objeto_body = document.body; Ejemplos de propiedades: objeto_head.parentnode == objeto_html objeto_body.parentnode == objeto_html objeto_body.previoussibling == objeto_head objeto_head.nextsibling == objeto_body objeto_head.ownerdocument == document var numerodescendientes = objeto_html.childnodes.length; 11
TIPOS DE NODOS alert(document.nodetype); // 9 alert(document.documentelement.nodetype); // 1 alert(document.nodetype == Node.DOCUMENT_NODE); // true; en IE fallaria alert(document.documentelement.nodetype == Node.ELEMENT_NODE); // true; en IE fallaria El único navegador que no soporta las constantes predefinidas es Internet Explorer 7 y sus versiones anteriores, por tanto es necesario definirlas: if(typeof Node == "undefined") { var Node = { ELEMENT_NODE: 1, ATTRIBUTE_NODE: 2, TEXT_NODE: 3, CDATA_SECTION_NODE: 4, ENTITY_REFERENCE_NODE: 5, ENTITY_NODE: 6, PROCESSING_INSTRUCTION_NODE: 7, COMMENT_NODE: 8, DOCUMENT_NODE: 9, DOCUMENT_TYPE_NODE: 10, DOCUMENT_FRAGMENT_NODE: 11, 12 NOTATION_NODE: 12 }; }
ACCESO A ATRIBUTOS Métodos DOM, los nodos de tipo Element contienen la propiedad attributes, que permite acceder a todos los atributos de cada elemento: getnameditem(nombre), devuelve el nodo cuya propiedad nodename contenga el valor nombre. removenameditem(nombre), elimina el nodo cuya propiedad nodename coincida con el valor nombre. setnameditem(nodo), añade el nodo a la lista attributes, indexándolo según su propiedad nodename. item(posicion), devuelve el nodo que se encuentra en la posición indicada por el valor numérico posición. Los métodos anteriores devuelven un nodo de tipo Attr. Métodos DOM directos: getattribute(nombre), es equivalente a attributes.getnameditem(nombre). setattribute(nombre, valor) equivalente a attributes.getnameditem(nombre).value= valor. removeattribute(nombre), equivalente a attributes.removenameditem(nombre). 13
ACCESO A ATRIBUTOS EJEMPLO <p id="introduccion" style="color: blue">párrafo de prueba</p> var p = document.getelementbyid("introduccion"); var elid = p.attributes.getnameditem("id").nodevalue; //elid = "introduccion" var elid = p.attributes.item(0).nodevalue; // elid = "introduccion" p.attributes.getnameditem("id").nodevalue = "preintroduccion"; var atributo = document.createattribute("lang"); atributo.nodevalue = "es"; p.attributes.setnameditem(atributo); var p = document.getelementbyid("introduccion"); var elid = p.getattribute("id"); // elid = "introduccion" p.setattribute("id", "preintroduccion"); 14
ACCESO DIRECTO A LOS NODOS El árbol DOM de una pagina xhtml puede tener miles de nodos, por lo que DOM proporciona una serie de métodos para acceder de forma directa: getelementsbytagname(): obtiene todos los elementos de la página cuya etiqueta sea igual que el parámetro que se le pasa a la función. El valor devuelto es un objeto de tipo NodeList (array con todos los nodos que cumplen la condición). var parrafos = document.getelementsbytagname( p ); var primerparrafo = parrafos[0]; var parrafouno = document. getelementsbytagname( p )[0]; var enlaces = primerparrafo.getelementsbytabname( a ); 15
ACCESO DIRECTO A LOS NODOS getelementsbyname(): obtiene todos los elementos de la página cuyo atributo name coincida con el parámetro que se le pasa a la función. <p name= pintroduccion > esta es la introducción </p> var parrafointro = document.getelementsbyname( pintroduccion ); getelementbyid(): obtiene el elemento cuyo atributo id coincide con el parámetro indicado en la función. El atributo id debe ser único para cada elemento de una misma página. var cabecera = document.getelementbyid( cabecera ); <div id= cabecera > <p> <img src=. </div> 16
CREAR, MODIFICAR Y ELIMINAR NODOS createattribute(nombre): Crea un nodo de tipo atributo con el nombre indicado. createcdatasection(texto): Crea una sección CDATA con un nodo hijo de tipo texto que contiene el valor indicado. createcomment(texto): Crea un nodo de tipo comentario que contiene el valor indicado. createdocumentfragment(): Crea un nodo de tipo DocumentFragment. createelement(nombre_etiqueta): Crea un elemento del tipo indicado en el parámetro nombre_etiqueta. createentityreference(nombre): Crea un nodo de tipo EntityReference createprocessinginstruction(objetivo, datos): Crea un nodo de tipo ProcessingInstruction. createtextnode(texto): Crea un nodo de tipo texto con el valor indicado como parámetro. Internet Explorer no soporta los métodos createcdatasection, createentityreference y createprocessinginstruction. Los métodos más 17 empleados son createelement, createtextnode y createattribute.
EJEMPLO Añadir un párrafo: var pnuevo = document.createelement( p ); var texto = document.createtextnode( texto del párrafo ); pnuevo.appendchild(texto); document.body.appendchild(pnuevo); var pviejo = document.body.getelementbyid( pcabecera ); document.body.insertbefore(pnuevo,pviejo); Eliminar un párrafo: var pcab = document.getelementbyid( pcabecera ); document.body.removechild(pcab); //sino conozco de donde cuelga este elemento pcab.parentnode.removechild(pcab); Intercambiar un párrafo: var pviejo = document.body.getelementbyid( pcabecera ); pviejo.parentnode.replacechild(pnuevo, pviejo); 18
ATRIBUTOS HTML EN DOM Dado el siguiente elemento: <img id= logo src= logo.gif > var laimagen = document.getelementbyid( logo ); DOM tradicional: var origen = laimagen.attributes.getnameditem( src ); laimagen.attributes.getnameditem( src").nodevalue = " nuevologo.gif "; DOM tradicional directo: var origen = laimagen.getattribute( src ); laimagen.setattribute( src, nuevologo.gif ); DOM para HTML: var origen = laimagen.src; laimagen.src = nuevologo.gif ; 19
PROPIEDADES CSS EN DOM (I) Atributo class (palabra reservada en JavaScript): <p id="parrafo" class="normal">...</p> var parrafo = document.getelementbyid("parrafo"); alert(parrafo.class); // muestra "undefined" alert(parrafo.classname); // muestra "normal Propiedades CSS mediante el atributo style de HTML: <p id="parrafo" style= font-size:18px;color:red">...</p> var parrafo = document.getelementbyid("parrafo"); var color = parrafo.style.color; //propiedades con nombre compuesto, eliminamos guiones y escribimos en mayúsculas la primera letra de cada palabra que no sea la primera var tamanyo = parrafo.style.fontsize; parrafo.style.fontsize = 10px ; 20
PROPIEDADES CSS EN DOM (II) Para obtener la propiedad independientemente de cómo se haya aplicado, style o mediantes reglas(en los elementos html, con una clase de estilo o con un identificador único). var parrafo = document.getelementbyid("parrafo"); // Código JavaScript para Internet Explorer // currentstyle requiere el nombre según el formato JavaScript var elfontsize = parrafo.currentstyle[ fontsize ]; // Código JavaScript para otros navegadores //getpropertyvalue requiere el nombre original de la propiedad var elfontsize = document.defaultview.getcomputedstyle(parrafo, ).getpropertyvalue( font-size ); 21
PROPIEDADES CSS EN DOM (III) Función compatible con todos los navegadores, creada por el programador Robert Nyman y publicada en su blog personal (http://www.robertnyman.com/2006/04/24/get-the-renderedstyle-of-an-element/) // Código JavaScript para cualquier navegador var parrafo = document.getelementbyid("parrafo"); var color = getstyle(parrafo, 'color'); 22
PROPIEDAD INNERHTML (I) innerhtml no es un estándar, es una propiedad de Microsoft (http://msdn2.microsoft.com/en-us/library/ms533897.aspx). Formará parte del estándar HTML 5. Una de las diferencias principales entre innerhtml y DOM es que el primero es un string y el segundo una estructura de objetos jerárquica (un arbol). Crear un elemento innerhtml document.getelementbyid("contenedor").innerhtml = "<div id="capa" >Texto<!--comentario--></div>"; DOM div = document.createelement("div"); div.setattribute("id", "capa"); texto = document.createtextnode("texto"); div.appendchild(texto); div_comentario = document.createcomment("comentario"); div.appendchild(div_comentario); document.getelementbyid("contenedor").appendchild(div); 23
PROPIEDAD INNERHTML (II) Obtener el texto de un elemento innerhtml texto = document.getelementbyid("contenedor").innerhtml DOM texto = document.getelementbyid("contenedor").firstchild.nodevalue; Comparativa http://www.quirksmode.org/dom/innerhtml.html 24
CROSS BROWSER Las diferencias existentes entre los navegadores disponibles en la actualidad complican en exceso el desarrollo de aplicaciones compatibles con todos los navegadores, llamadas aplicaciones "cross browser" en inglés. Hay que diseñar utilidades para abstraernos del navegador. Ejemplo: http://www.cross-browser.com http://books.google.es/books?id=f_2r9ra2pjec&lpg=p P1&pg=PA292#v=onepage&q=&f=false 25
ENLACES DOM Mozilla https://developer.mozilla.org/en/gecko_dom_reference DOM IE http://msdn.microsoft.com/en-us/library/ms533053(vs.85).aspx WebKit: Chrome, Safari http://webkit.org/projects/dom/index.html 26