Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de DOM

El DOM (document object model) marca la escructura de la página

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

DOM (VI)

Aspectos del DOM y XML

Cargar una cadena XML

En páginas anteriores vimos cómo cargar un documento XML para ser analizado por javascrit. Sin embargo también es posible cargar una cadena de texto o "string" que contiene un documento XML para ser analizado con javascript. Utilizamos entonces otro objeto del navegador llamado DOMParser. Supongamos que tenemos un documento XML guardado en la variable texto, el código para acceder al documento con javascript será:

if (window.DOMParser) {
    parser=new DOMParser();
    xmlDoc=parser.parseFromString(texto,"text/xml");
    }
else {  // Internet Explorer
    xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
    xmlDoc.async="false";
    xmlDoc.loadXML(texto);
    } 

Vemos aquí que la mayoría de los navegadores utilizan el objeto DOMParser mientras que Internet Explorer utiliza un control "ActiveX". El código anterior carga un documento XML guardado en una variable de tipo "cadena". Lo único que puede variar es el nombre de la variable donde guardamos el documento XML, que aquí la hemos llamado texto.

Acceso entre dominios

Por motivos de seguridad los navegadores no permiten acceder a un documento XML que esté en otro dominio o sitio web, por lo que tanto el archivo XML como la página que lo muestra deben estar ubicados en el mismo servidor.

Acceso a atributos

El acceso a los atributos puede hacerse de varias maneras, pongamos por ejemplo que tenemos la siguiente etiqueta XML con varios atributos.

<foto archivo="fotos/troncomovil.gif" pie="Troncomóvil."/>

Una vez cargado el documento XML, Accedemos en primer lugar al nodo elemento:

mifoto=xmlDoc.getElementsByTagName("foto")[0];

Después tenemos varias formas de acceder a los atributos. Podemos crear un array con todos los atributos del elemento, mediante la propiedad attributes

atrib=mifoto.attributes

Para luego acceder a cada uno de ellos mediante su número de posición en el array. La propiedad nodeValue nos dará el valor del atributo.

ruta_mifoto=atrib[0].nodeValue;

texto_mifoto=atrib[1].nodeValue;

O también podemos utilizar el método getAttribute(), que aplicado directamente al nodo "element" nos devuelve el valor del atributo. como parámetro pasamos el nombre del atriibuto.

ruta_mifoto=mifoto.getAttribute("archivo");

texto_mifoto=mifoto.getAttribute("pie");

Otras operaciones que podemos hacer con atributos es cambiar el valor del atributo o crearlo nuevo mediante setAttribute(), o eliminarlo mediante removeAttribute()

Diferencias entre navegadores

Todos los navegadores son compatibles con el acceso al DOM para documentos XML, sin embargo existen diferencias entre unos y otros.

Una de las principales diferencias es la forma de manejar los espacios en blanco entre etiquetas.

Entendemos por espacio en blanco, no sólo el espacio en blanco, sino también los saltos de línea o tabuladores en el código XML.

Mientras que Internet Explorer los ignora, el resto de navegadores los trata como si fueran nodos de texto cuyo texto es un espacio en blanco.

Debemos tener esto en cuenta al utilizar propiedades como childNodes o nextSibbling.

Si sólo queremos obtener los nodos tipo "element" debemos poner alguna instrucción condicional (tipo if), que limite los nodos a los de tipo "element" usando la propiedad nodeType. Para los nodos de tipo "element" la propiedad nodeType tiene valor 1. (véase el ejemplo de la página 5 de este manual).

Manipular los nodos

Podemos manipular los nodos en XML de la misma manera que lo haríamos con HTML, es decir usando los métodos y propiedades siguientes, de igual manera que con HTML. El uso de la mayoría de estos métodos y propiedades viene explicado en el Manual de javascript: 5. Acceso al DOM

Crear nuevas etiquetas e insertarlas: Al igual que hacemos en HTML mediante createElement() y createTextNode() creamos el nodo "element" que contiene la etiqueta y el nodo "text" que contiene el texto. Hacemos depender uno de otro mediante appendChild(), y despues mediante appendChild() o insertBefore() insertamos el nodo en el documento.

Eliminar nodos: El método removeChild() sirve para eliminar un nodo. El método removeAttribute elimina un nodo atributo, tal como se ha explicado anteriormente.

Reemplazar nodos: El método replaceChild remplaza un nodo por otro, tal como explica en el curso de javascript. También podemos reemplazar el valor de un nodo reescribiendolo con la propiedad nodeValue.

Duplicar nodos:: El método cloneNode() permite duplicar un nodo. La forma de utilizarlo viene explicada en el curso de javascript.

Propiedades y métodos del documento

Las siguientes propiedades se aplican al objeto raiz (xmlDoc), y muestran información sobre el mismo.

• async: Devuelve true o false según el tipo de envio de datos al servidor sea asíncrono o no.
• doctype: Permite acceder al doctype (nodo de tipo "document-type").
• documentElement: Permite acceder a la etiqueta raíz.
• documentURI: Devuelve la ruta o ubicación del archivo XML (no disponible en IE).
• implementation: Devuelve el objeto DOMImplementation para este documento (no disponible en IE).
• inputEncoding: Devuelve el tipo de codificación de caracteres (ISO, UTF, etc.) que tiene el documento XML).

Termina aquí el manual de DOM. En él hemos visto cómo acceder al DOM de forma dinámica, es decir con javascript, tanto en las páginas en HTML como en los documentos en XML. Espero que os haya sido útil.

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com