Existen varios mecanismos para embeber documentos XML en páginas HTML, pero sólo Microsoft y su navegador IE (5 o superior) desarrollaron una característica denominada "islas de datos XML", que permitia insertar o enlazar documentos XML sin ayuda programática, simplemente utilizando la etiqueta xml y los atributos HTML "datasrc" y "datafld". Pero para implementar este mecanismo en modo compatible multinavegador es necesario recurrir a la nueva funcionalidad de html5 llamada "bloques de datos", con la cual, a partir de una etiqueta script se puede insertar contenido XML. (válido en IE9, Firefox, Opera,chrome, safari). Si se prefiere enlazar recursos XML externos, la opción disponible sin ayuda programática es utilizar la etiqueta object.
Una vez embebido el documento XML (enlínea o como recurso externo), se puede obtener de forma fácil una cadena de texto que represente dicho documento de marcas, pero lo realmente útil es su manipulación y procesamiento, y trabajar con cadenas de texto no es, en este caso, la mejor opción. Es por ello que en este punto es donde intervienen los lenguajes de programación, concretamente, en el ámbito o terreno de la manipulación DOM; es decir, generar de algún modo el arbol DOM de dicho documento para obtener los objetos programáticos para su manipulación y tratamiento.
En este tutorial se utiliza JavaScript y se recurre a un objeto estándar para generar el DOM del documento y así poder acceder a su contenido, denominado DOMParser().
Pasos para embeber un documento XML en línea en una página HTML (uso de la etiqueta script)
- Para insertar en línea el documento XML, definimos una etiqueta script con identificador(atributo "id") y tipo de
contenido( atributo "type") cuyo valor es "application/xml" o "text/xml", esto es:
<script id="miXML" type="application/xml">
Para que esto funcione, debe omitirse el atributo "src" y debe especificarse un tipo de contenido no ejecutable. - escribimos el documento XML dentro de la etiqueta (bloque de datos). (Nota: el documento XML no puede contener la etiqueta de cierre script)
- cerramos la etiqueta script
- creamos el script para generar el DOM del documento XML insertado. para ello necesitamos: la cadena de texto que
representa el documento de marcas, un nuevo objeto DOMParser y el método parseFromString() para procesar el árbol DOM a
partir de dicha cadena de texto; por lo tanto, utilizamos las siguientes instrucciones:
var textXML = document.getElementById("miXML").textContent;
var parser = new DOMParser();
var doc = parser.parseFromString(textXML, "application/xml"); - Una vez generado el documento DOM ( en este caso almacenado en la variable doc) ya puedes acceder a su contenido mediante
las interfaces implementadas por el estándar DOM, por ejemplo:
var articulos = doc.getElementsByTagName("articulos");
alert(articulos.length);
Practica1: documento XML en línea
Pasos para enlazar un documento XML a una página HTML (uso de la etiqueta object)
- Creas un documento XML y lo guardas con extensión xml
- Lo enlazas utilizando la etiqueta object: debes proporcionar los siguientes datos:
- un identificador: id="identificador"
- ruta del recurso: data="ruta.xml"
- tipo de contenido: type="text/xml"
- Importante no mostrar el contenido embebido: style="display:none"
- Una vez embebido el documento hay que acceder a su contenido pero en este caso se crea el árbol DOM de forma automática,
por lo que se accede mediante JavaScript utilizando el siguiente código:
var doc = document.getElementById("identificador").contentDocument
- Y ya está disponible para su manipulación DOM.