El DOM (document object model) marca la escructura de la página
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 22
Visitas el mes pasado: 60
Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:
Por elegir aprende-web
Aprende-web está diseñado a partir de los lenguajes que aquí mismo se enseñan.
By Anyelguti
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.
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.
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()
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).
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.
Las siguientes propiedades se aplican al objeto raiz (xmlDoc), y muestran información sobre el mismo.
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.
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