TEMA 3 A: INTRODUCCIÓN AL DOM

TEMA 3 A: INTRODUCCIÓN AL DOM 1.- Qué es el DOM?... 2 1.1.- DOM y JavaScript... 2 1.3.- Cómo se accede al DOM?... 3 2. Instalar una consola... 4 3. Averiguar la versión DOM de Explorer... 5 4.- El DOM de XML en Firefox... 6 5.- XML en plataformas cruzadas... 7 6.- Carga de un documento XML (o html)... 8 1

1.- Qué es el DOM? (http://developer.mozilla.org/es/docs/referencia_dom_de_gecko:introducci%c3%b3n) El modelo de objeto de documento (DOM) es una interfaz de programación para los documentos HTML y XML. Facilita una representación estructurada del documento y define de qué manera los programas pueden acceder, al fin de modificar, tanto su estructura, estilo y contenido. El DOM da una representación del documento como un grupo de nodos y objetos estructurados que tienen propiedades y métodos. Esencialmente, conecta las páginas web a scripts o lenguajes de programación. Una página web es un documento. Éste documento puede exhibirse en la ventana de un navegador o también como código fuente HTML. Pero, en los dos casos, es el mismo documento. El modelo de objeto de documento (DOM) proporciona otras formas de presentar, guarda y manipular este mismo documento. El DOM es una representación completamente orientada al objeto de la página web y puede ser modificado con un lenguaje de script como JavaScript. El W3C DOM estándar forma la base del funcionamiento del DOM en muchos navegadores modernos. Varios navegadores ofrecen extensiones más allá del estándar W3C, hay que ir con extremo cuidado al utilizarlas en la web, ya que los documentos pueden ser consultados por navegadores que tienen DOMs diferentes. Por ejemplo, el DOM de W3C especifica que el método getelementsbytagname en el código de abajo debe devolver una lista de todos los elementos <P> del documento: paragraphs = document.getelementsbytagname("p"); // paragraphs[0] es el primer elemento <p> // paragraphs[1] es el segundo elemento <p>, etc. alert(paragraphs[0].nodename); Todas las propiedades, métodos y eventos disponibles para la manipulación y la creación de páginas web está organizado dentro de objetos. Un ejemplo: el objeto document representa al documento mismo, el objeto table hace funcionar la interfaz especial HTMLTableElement del DOM para acceder a tablas HTML, y así sucesivamente. 1.1.- DOM y JavaScript El ejemplo de abajo es JavaScript. Pero utiliza el DOM para acceder al documento y a sus elementos. El DOM no es un lenguaje de programación pero sin él, el lenguaje JavaScript no tiene ningún modelo o noción de las páginas web, de la páginas XML ni de los elementos con los cuales es usualmente relacionado. Cada elemento -"el documento íntegro, el título, las tablas dentro del documento, los títulos de las tablas, el texto dentro de las celdas de las tablas"- es parte del modelo de objeto del documento para cada documento, así se puede acceder y manipularlos utilizando el DOM y un lenguaje de escritura, como JavaScript. El contenido de la página es almacenado en DOM y el acceso y la manipulación se hace vía JavaScript, podría representarse aproximadamente así: API(web o página XML) = DOM + JS(lenguaje de script) El DOM fue diseñado para ser independiente de cualquier lenguaje de programación 2

particular, hace que la presentación estructural del documento sea disponible desde un simple y consistente API. 1.3.- Cómo se accede al DOM? Los diferentes navegadores tienen directrices DOM distintas, y éstas directrices tienen diversos grados de conformidad al actual estándar DOM, pero todos los navegadores web usan el modelo de objeto de documento para hacer accesibles las páginas web al script. Cuando se crea un script esté en un elemento <SCRIPT> o incluido en una página web por la instrucción de cargar un script inmediatamente está disponible para usarlo con el API, accediendo así a los elementos documento o ventana, para manipular el documento mismo o sus diferentes partes, las cuales son los varios elementos de una página web. La programación DOM hace algo tan simple como lo siguiente, lo cual abre un mensaje de alerta usando la función alert() desde el objeto ventana, o permite métodos DOM más sofisticados para crear realmente un nuevo contenido, como en el largo ejemplo de más abajo. <body onload="window.alert('hola clase');"> El ejemplo siguiente muestra la función a ejecutar cuando el documento se está cargando (y que el DOM completo es disponible para su uso). Esta función crea un nuevo elemento H1, le pone texto y después lo agrega al árbol del documento: <html> <head> <script> // ejecuta esta función cuando la página se carga window.onload = function() { // crea un par de elementos // en otra página HTML vacía heading = document.createelement("h1"); heading_text = document.createtextnode("cabeza grande!"); heading.appendchild(heading_text); document.body.appendchild(heading); </script> </head> <body> </body> </html> 3

2. Instalar una consola Dada las características del curso mejor que usar la función Alert de Javascript vamos a crear una consola por la que obtener los mensajes. Con esto evitaremos la molesta detención de la ejecución del código cada vez que queremos observar que está haciendo nuestro script. De momento este código será un ejemplo de DOM. Más adelante irá apareciendo el significado de cada instrucción. Función de Javascript para consola: function consola(txt){ var con = document.getelementbyid("consola"); con.innerhtml += txt + "<hr> "; Simplemente hemos hecho referencia a un elemento cuyo Id es consola. Por ello necesitamos que el código tenga esta línea: <div id="consola"></div> La siguiente instrucción hace que el contenido del elemento encontrado (un DIV) sea HTML y que sea el que tenía más el que le indiquemos. Hemos puesto como separador una línea. Para probar: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>untitled</title> <script> function consola(txt){ var con = document.getelementbyid("consola"); con.innerhtml += txt + "<hr> "; </script> </head> <body onload="consola('hola mundo')"> <div id="consola"></div> </body> </html> Nota: Para que funcione la función primero se debe haber cargado el documento, sino no encontrará la etiqueta <DIV>. 4

3. Averiguar la versión DOM de Explorer Para crear un objeto ActiveX en JavaScript, Microsoft implemento una nueva clase llamada ActiveXObject que puede utilizarse para instanciar cualquier número de objetos ActiveX. Su constructor acepta un argumento, una cadena con la versión del objeto ActiveX que se desea crear. En ese caso, es la versión del documento XML. El primer objeto ActiveX del modelo DOM de XML se denominó Microsoft. XmlDom y se creaba así: var oxmldom = new ActiveXObject("Microsoft.XmlDom"); Los objetos DOM de XML más recientes se comportan como cualquier otro objeto DOM, permitiéndonos recorrer el árbol del modelo DOM y manipular nodos DOM. Dado que existen 6 versiones diferentes siempre desearemos utilizar la más reciente, es muy útil emplear una función para determinar qué versión podemos usar. Haciéndolo, nos aseguramos de disponer del soporte más actualizado y del mejor rendimiento. function creadocumento(){ //Creo array de versiones var aversion = "MSXML2.DOMDocument.6.0", "MSXML2.DOMDocument.5.0", "MSXML2.DOMDocument.4.0","MSXML2.DOMDocument.3.0", "MSXMI.2.DOMDocument", "Microsoft.XmlDom"]; //Recorro en búsqueda for (var i =0;i < aversion.length; i++) { try { var oxmldom = new ActiveXObject (aversion[i]); consola(aversion[i]); return oxmldom; catch (oerror){ consola(oerror.description + " " + oerror); throw new Error("MSXML no está instalado"); Esta función recorre toda la matriz aversion que contiene las cadenas de versión de los distintos documentos DOM MSXML. Empieza el recorrido con la versión más reciente, DOMDocument.6.0, e intenta (try) crear el documento DOM. Si la creación del objeto tiene éxito, se devuelve y creadocumento() existe. Además escribe el nombre de la versión creada en la consola. Si falla (catch), se produce un error que se depura en el bloque try..catch, de forma que el bucle continúa. En este caso se escribe en la consola la descripción del error. Como el tratamiento es diferente en Explorer y Mozilla se apaña con una suma de ambas interpretaciones para que se pueda leer cual es el error. Si falla la creación del documento MSXML, se genera un error por Javascript (en caso de Mozilla, claro) indicando que MSXML no está instalado. 5

Para que funciones debemos hacer algo como: function encarga() { var oxlmdom = creadocumento(); En la práctica sólo comprobamos si soporta la versión 4, en caso contrario tomamos Microsoft.XmlDom 4.- El DOM de XML en Firefox Cuando llega la hora de implementar el DOM de XML en Mozilla Firefox, los desarrolladores adoptan un método de aproximación más centrado en los estándares convirtiéndolo en parte de una implementación de JavaScript. Así, Mozilla asegura el soporte DOM de XML en todas las plataformas de todos los navegadores basados en Gecko. Para crear un DOM de XML en Firefox, debemos llamar al método createdocument () correspondiente al objeto document. implementation. Este método acepta tres argumentos: 1. Una cadena que contiene el espacio de nombres URI para el documento que se desea utilizar 2. Es una cadena que contiene el nombre cualificado del elemento raíz del documento 3. El tipo de documento (también conocido como doctype) que deseamos crear. Actualmente no hay soporte JavaScript para tipos de documentos en Firefox, de forma que el tercer argumento debería ser siempre null. Los nombres de los espacios de nombres XML pueden aparecer como nombres cualificados, que contienen un símbolo de dos puntos (:) que divide al nombre en un prefijo del espacio de nombres y una parte local. El prefijo, que corresponde a la referencia URI, selecciona un espacio de nombres. La combinación del espacio de nombres URI gestionado universalmente y del espacio de nombres propio del documento produce identificadores que son únicos a nivel universal. Se proporcionan mecanismos para definir el ámbito de los prefijos y los valores por defecto. Para crear un documento DOM vacío, podemos hacer lo siguiente: var oxmldom = document.implementation.createdocument(,,null); Para crear un DOM de XML con un elemento de documento, especifique el nombre de la etiqueta en el segundo argumento: var oxmldom = document.implementation.createdocument(, libros,null); Este código crea un DOM de XML cuyo documentelement es <libros/>. 6

Especificando el espacio de nombres URI en el primer argumento: var oxmldom = document.implementation.createdocument ("http://www.site.com", "libros", null) Cuando especificamos un espacio de nombres en el método createdocument (), Firefox asígna automáticamente el prefijo 0 para representar el espacio de nombres URL <a0:libros xmlns:a0="http: //www.site.com" /> 5.- XML en plataformas cruzadas (http://www.w3schools.com/dom/dom_parser.asp) Siempre es necesario tener en cuenta las diferencias del código Javascript entre las plataformas cruzadas. Para ello diseñamos esta función de Javascript. <html> <head> <script type="text/javascript"> var xmldoc; var navegador; function cargadocumento() { // code for IE if (window.activexobject){ xmldoc=new ActiveXObject("Microsoft.XMLDOM"); navegador = IE ; consola("ie") // code for Mozilla, Firefox, Opera, etc. else if (document.implementation && document.implementation.createdocument) { xmldoc=document.implementation.createdocument("","",null); navegador = FI ; consola("mozilla, Firefox u Opera") // Error else { consola("este navegador no soporta DOM"); consola(xmldoc); function consola(txt){ var con = document.getelementbyid("consola"); con.innerhtml += txt + "<br> "; </script> </head> <body onload="cargadocumento()"> <div id="consola"></div> </body> </html> 7

En este ejemplo aparecerá en la consola el navegador que estamos usando. En caso de que el navegador soporte ActiveXObject escribirá IE, en caso de que soporte document.implementation y este permita crear documentos estamos ante Firefox y en caso de que no lo soporte entonces pintará un error. Aprovechamos para guardar en la variable navegador de que navegador se trata. 6.- Carga de un documento XML (o html) Ambos navegadores soportan el método de cargar XML con load() que se puede combinar con el método ASYNC. LOAD() Permite cargar una un archivo XML en una localización específica en la Web. ASYNC Como sucede con XMLHttp (AJAX), load () nos permite cargar los datos en dos modos: asíncrono y sincrónico. Por defecto, el método load () es asíncrono. Para utilizar el modo sincrónico, debemos configurar async del objeto MSXML como false. function cargaxml(dir){ cargadocumento(); xmldoc.async = false; try {xmldoc.load(dir); catch (oerror) {consola(oerror.description + oerror);return false; var raiz = xmldoc.documentelement; consola(texto(raiz)) Creamos esta función que intenta cargar la dirección indicada. Si falla capturamos el error y lo mostramos en la consola. Si no falla mostramos lo que vale xmldoc. Para mostrar el contenido del XML cargado hemos recurrido a una función que recorre todo el árbol XML y que recoge cada valor de cada nodo con el fin de que sea compatible en ambos navegadores. Adelantándonos en el tema (luego se explica cada método) usaremos este visor de contenido de lo que cargamos: function texto(onodo){ var tt = ""; for (var i=0; i<onodo.childnodes.length; i++){ if(onodo.childnodes[i].haschildnodes()) { tt += texto(onodo.childnodes[i]) else {tt += onodo.childnodes[i].nodevalue; return tt; EJERCICIOS: Qué ocurre si probamos un XML local? 1.- En Firefox 2.- En iexplorer 8

<platos> <primeros> <nombre>macarrones</nombre> <fecha>sun, 30 Dec 1899 00:00:00 +0100</fecha> </primeros> <primeros> <nombre>paella</nombre> <fecha>fri, 30 Dec 2004 00:00:00 +0100</fecha> </primeros> </platos> <body onload="cargaxml( carga_xml.xml )";> Qué ocurre si probamos un RSS (que es XML) de un dominio externo al que cargamos esta función? <body onload="cargaxml('http://www.boua.ua.es/rss.asp')";> 3.- Prueba desde un dominio (127.0.0.1) qué ocurre con Firefox? Qué ocurre con iexplorer? 4.- Prueba desde una dirección de disco (G:\curso_dom_ajax_xml\ tema3\ejercicios\carga_xml.html) qué ocurre con Firefox? y con iexplorer? 5.- Qué ocurre si probamos con un XML mal formado / no válido? <platos> <primeros> <nombre>macarrones</nombre> <fecha>sun, 30 Dec 1899 00:00:00 +0100</fecha> </primeros> <primeros> <nombre>paella</nombre> <fecha>fri, 30 Dec 2004 00:00:00 +0100</fecha> </primeros> </kk> Cuando trabajamos en modo asíncrono ASYNC= true entonces el script continua aunque el XML no se haya cargado (igual que ocurre con AJAX). Para controlar si se ha terminado de cargar necesitamos el evento de onreadystatechange que permite monotorizar la propiedad readystate. Por desgracia es solo de Explorer. El Firefox usa el evento Load y el manejador de envento onload. Cruzando ambos navegadores saldría: 9

function cargaxml(dir){ cargadocumento(); xmldoc.async = true; xmldoc.load(dir); if (navegador== IE ){ xmldoc.onreadystatechange = function(){ if (xmldoc.readystate == 4){ var raiz = xmldoc.documentelement; consola(texto(raiz)); else { consola(xmldoc.readystate + " sentado esperado"); ; else{ xmldoc.onload = function(){ var raiz = xmldoc.documentelement; consola(texto(raiz)); Lo cual es un lío: mientras que iexplorer si espera a que se cargue la página (gracias a readystate que se me te en un bucle igual que hacía AJAX), Gecko no. Es por eso que evitaremos usar el DOM de esta manera. Concretamente, en este ejemplo, en la parte que se refiere a Explorer: xmldoc.onreadystatechange = function(){ if (xmldoc.readystate == 4){ var raiz = xmldoc.documentelement; consola(texto(raiz)); else { consola(xmldoc.readystate + "sentado esperado"); ; El documento XML que se indica en la variable dir (por ejemplo rss.xml ) se carga en el DOM de XML. Cuando readystate alcanza el valor 4, significa que el documento se ha cargado por completo y se ejecuta el código que se encuentra dentro del bloque if. LOADXML (loadxml) solo iexplorer La segunda forma de cargar datos XML, loadxml (), difiere del método load () en que se carga XML desde una cadena. Esta cadena debe contener código XML bien formado, como en el siguiente ejemplo: var sxml = "<root><persona><nombre>pepe Pepe Oreja Repe</nombre></persona></root>"; XmlDoc.loadXML(sXml); Aquí, los datos XML contenidos en la variable sxml se cargan en el documento XmlDoc. No hay ninguna razón para comprobar la propiedad readystate o para configurar la propiedad async cuando empleamos loadxml(), ya que no implica ninguna petición al servidor. El método loadxml () no existe en la implementación en Firefox. Sin embargo, es posible emular su comportamiento mediante la clase DOMParser. DOMParser dispone de un método llamado parsefromstring (), que carga una cadena y la inicializa en un documento: 10

var oparser = new DOMParser(); xmldoc = oparser.parsefromstring(txt,"text/xml"); El método parsefromstring () devuelve un objeto DOM de XML, de forma que podemos tratar XmlDoc en este código como uno de estos objetos. El código cruzado quedaría: function cargatxtxml(){ cargadocumento(); if(navegador=="ie") xmldoc.loadxml(txt); else { var oparser = new DOMParser(); xmldoc = oparser.parsefromstring(txt,"text/xml"); var raiz = xmldoc.documentelement; consola(texto(raiz)); ; 11