Entendido.

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

Logo

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++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 193

Visitas el mes pasado: 424

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


Introducción a XML
Desarrollo Web
DOM
mozilla.org
php: DOM manual
php.net
Document Object Model (DOM) Level 1 Specification
W3C.org
Especificación del Modelo de Objetos del Documento (DOM), Nivel 1
Traducción de W3C: conclase.net
HTML DOM Tutorial
w3schools.com
XML DOM Tutorial
w3schools.com

Donativos

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




DOM (V)

Acceso a elementos XML

imagen dom

Acceso a la página de XML

En la página anterior vimos cómo podíamos acceder al DOM de una página en XML mediante el método XMLHttpRequest(), y vimos también un pequeño ejemplo de cómo acceder a algunos elementos de la página.

A partir de aquí se desarrollan una serie de tecnologías que unen varios lenguajes de programación, conocidas como Ajax.

Sin entrar a explicar como funciona ajax, (lo cual lo dejamos para el manual de ajax), veremos aquí los métodos y propiedades más habituales para acceder a los elementos de XML mediante javascript.


Acceso a elementos XML

Aunque cabría pensar que se pueden utilizar los mismos métodos del DOM que en HTML para acceder a los elementos de XML, esto no es así ya que métodos como getElementById() o getElementsByName() no pueden usarse con XML, ya que para ello XML debería tener algunas etiquetas predefinidas, cosa que no ocurre.

Por tanto el único método que podemos usar para localizar etiquetas XML es getElementsByTagName().

En realidad tenemos varios procedimientos para acceder a los elementos:


Usar el método getElementsByTagName()

Tal como hemos visto en la página anterior, usamos el método con cada etiqueta y vamos llamando a cada uno de los elementos del array que lo forman. Esto presupone que tenemos que saber el nombre de cada una de las etiquetas y la cantidad de etiquetas que hay con cada nombre.


Recorrer los elementos (nodos) del documento.

Volvamos al ejemplo de la página anterior donde teníamos el archivo libro.XML:

<?xml version="1.0" encoding="iso-8859-15"?>
<libro>
  <titulo>Don Juan Tenorio</titulo>
  <autor>José Zorrilla</autor>
  <genero>teatro clásico</genero>
  <año>1844</año>
</libro>

Cargamos el documento (recordamos que lo hacíamos mediante la función cargaDomXML(), en archivo javascript aparte) el cual lo obtenemos en la variable xmlDoc. A partir de ahí mediante la propiedad xmlDoc.childNodes creamos un array con todos los nodos hijos del nodo documento. Como en cualquier array podemos recorrer los elementos mediante un bucle. Las repeticiones del bucle vienen determinadas por la longitud del array, la cual se determina mediante la propiedad length. Veamos ahora cómo ver este archivo en una página HTML mediante javascript. Página libro.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page title</title>
<script type="text/javascript" src="cargaDocXML.js"></script>
<script type="text/javascript">
//cargar el documento XML
xmlDoc=cargaDocXML("libro.xml");
//Obtener array con todos los nodos secundarios:
nodos=xmlDoc.getElementsByTagName("libro")[0].childNodes;
var salida=""; //variable que recogerá los datos
//bucle para recorrer el array
for (i=0;i<nodos.length;i++) { 
    if (nodos[i].nodeType==1) { //sólo nodos tipo "element" (Type=1)
       nombre=nodos[i].nodeName; //Nombre de la etiqueta
       valor=nodos[i].childNodes[0].nodeValue; //texto de la etiqueta
       salida+="<p>"+nombre+": "+valor+"</p>"; //añadir a variable de salida.
       }
    }
//sacar datos en la página
window.onload=function() {
texto=document.getElementById("milibro");
texto.innerHTML=salida;
}
</script>
</head>
<body>
<h1>Libro</h1>
<div id="milibro"></div>
</body>
</html>

la página anterior se verá como en el siguiente enlace:

Documento libro


En este sencillo ejemplo accedemos a los elementos mediante la propiedad childNodes que crea el array que recorremos con el bucle.

Una vez accedemos a cada elemento, a éstos les aplicamos varias propiedades que nos darán la información que necesitamos, estas son nodeType, nodeName, nodeValue, las cuales explicaremos más adelante.

El texto de dentro de cada etiqueta es un nodo aparte (nodo de texto) que depende del nodo etiqueta, es por eso que debemos acceder al texto (nodo de texto) como el primer nodo hijo de cada etiqueta (nodo element).

Mediante la propiedad nodeType hemos restringido el acceso sólo a los nodos de tipo "element". Hacemos esto así para que no se muestren otros tipos de nodos que se pueden crear, y que no nos interesa que aparezcan.

Éste es un ejemplo sencillo en el que todas las etiquetas dependen de la etiqueta raíz. En caso de que hubiera más etiquetas anidadas hijas unas de otras, deberíamos repetir el proceso, creando un bucle dentro de otro o creando una función que compruebe si cada etiqueta tiene mas etiquetas dependientes, y mostrando su valor.


propiedades y métodos más comunes


Propiedades

Otras propiedades que podemos aplicar a cualquier nodo de XML son firstChild, lastChild, previousSibbling, nextSibbling, las cuales vienen explicadas en la página III de este manual.


métodos

Podemos usar los mismos métodos que se usan en la manipulación del DOM para HTML, excepto, como se ha dicho antes, los métodos getElementById() y getElementsByName(). La forma de usarlos es igual que que con HTML. Con ellos podemos crear, remplazar, insertar, o duplicar cualquier nodo. Aunque vienen explicados en la página III de este manual, y de una forma más amplia en el curso de javascript, recordemos cuales son éstos:






En la siguiente página seguiremos viendo cómo trabajar con XML y el DOM.

Aspectos de XML y DOM



Manual de DOM

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

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

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

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