El DOM conecta páginas web a scripts o lenguajes de programación al representar la estructura de un documento, como el HTML que representa una página web, en la memoria. Por lo general, se refiere a JavaScript, aunque el modelado de documentos HTML, SVG o XML como objetos no forma parte del lenguaje principal de JavaScript.
El DOM representa un documento con un árbol lógico. Cada rama del árbol termina en un nodo y cada nodo contiene objetos. Los métodos DOM permiten el acceso programático al árbol. Con ellos, puede cambiar la estructura, el estilo o el contenido del documento.
El siguiente código sería un formato sencillo de HTML
<!DOCTYPE html>
<html>
<head>
<title>About elk</title>
</head>
<body>The truth about elk.</body>
</html>En DOM se representaría de la siguiente manera:
El objetivo de la imagen es visualizar la estructura de árbol para entender el concepto y la estructura en si de DOM
En nuestro caso no usamos el modulo xml.dom de python en si sino que usamos directamente el modulo xml.dom.minidom el cual explicaré luego, mas allá de eso la teoría que usamos parte de la documentacion de xml.dom y por eso es importante mencionarlo.
xml.dom Es considerado una API (Application Programming Interface) de DOM que permite su implementación en XML dentro de Python para interpretarlo con su estructura de arbol característica e implementar sus métodos y funcionalidades. Ademas de ser una API es un modulo perteneciente a la librería de python
Todos los elementos de DOM son considerados objetos, a continuacion explicaré los que mas utilizamos. Cabe aclarar que dentro de los objetos existen diferentes grupos o clasificación para los mismos.
Partimos del siguiente archivo XML para mostrar los ejemplos:
<example>
<company>OpenAI</company>
<people>
<person id="P001">
<name gender="male">John</name>
<age>30</age>
<naixement>1985-11-24</naixement>
</person>
<person id="P002">
<name gender="female">Jane</name>
<age>21</age>
<naixement>2002-05-11</naixement>
</person>
</people>
</example>Element.tagName
Devuelve el valor en forma de cadena del nombre del elemento seleccionado.
Ej:
Mediante el siguiente codigo de python parseamos el documento XML anterior, extraemos el nodo raiz y lo guardamos en una variable. Utilizando tagName podemos mostrar su valor en pantalla el cual se corresponde con el elemento example que es el valor que esperabamos obtener.
getAttribute()
Devuelve el valor del atributo que indicamos entre los paréntesis y entre comillas. Si no existe o si el atributo no tiene valor te devuelve una cadena vacía.
Ej:
documentElement
Se utiliza para obtener el nodo raíz del documento
Ej:
En este caso reiteramos para cada persona en la lista de personas que para cada nombre en cada persona la obtención del atributo y así devolver ambos y si hubieran mas personas seguiría siendo válido por lo que es escalable.
En este caso el nodo raíz seria example el cual guardo en la variable nodoRoot y aprovecho luego a guardar el tagName en otra variable para mostrarlo por consola y que se vea el resultado
getElementsByTagName()
Este elemento busca todos los descendientes de un elemento particular cuyo nombre indicamos en los paréntesis entre comillas y los guarda en una lista.
Ej:
En este caso parseamos nuevamente el documento y guardamos en una variable la lista resultante del total de personas que en este caso serían 2 como se muestra cuando mostramos en pantalla la longitud de la lista personas.
firstChild.data
Este elemento refiere al primer hijo del nodo al que hace referencia es un atributo de solo lectura y el punto data se usa cuando queremos obtener el contenido de un nodo de tipo texto devolviendolo como una cadena.
Ej:
En este caso accedemos a cada persona y a su primer elemento nombre. Con firstChild accedemos al primer nodo hijo que en este caso es el del texto y con .data extraemos su valor en forma de cadena.
xml.dom.minidom es una implementacion en Python simplificada de DOM para manipular y crear árboles DOM.
Implementar minidom en Python consta de 2 lineas para poder comenzar a utilizarlo:
from xml.dom import minidom
asixDoc = minidom.parse("fichero.xml")- En la primera línea importamos el modulo minidom a nuestro proyecto Python
- En la segunda línea creamos una variable para parsear el documento XML y poder usar los diferentes objetos que definimos anteriormente
toxml()
Este elemento devuelve una cadena que contiene toda la estructura del XML representada por el nodo DOM
Ej:
Como se puede ver simplemente nos devuelve toda la estructura XML del archivo
XML es un lenguaje de marcas, un lenguaje de marcas combina datos y etiquetas que las marcan y que contienen información adicional sobre la estructura del texto o su presentación.
A continuación un ejemplo de XML
<?xml version="1.0" encoding="UTF-8"?>
<empleados>
<empleado id="1">
<nombre>Juan Pérez</nombre>
<puesto>Desarrollador de software</puesto>
<salario>50000</salario>
</empleado>
<empleado id="2">
<nombre>Maria González</nombre>
<puesto>Gerente de Proyecto</puesto>
<salario>70000</salario>
</empleado>
</empleados>-
Declaración
La primera línea es la de declaración y se usa para asegurar que los procesadores de XML puedan interpretar correctamente el documento y sus caracteres
?xmlSe utiliza para indicar que es una declaración XMLversion="1.0"Se utiliza para indicar que versión de XML usamosencoding="UTF-8"Se utiliza para indicar la codificación de los caracteres dentro del documento
-
Etiquetas
Las etiquetas tienen una estructura muy sencilla se escriben con una jerarquía de arbol y simplemente se incluye un
<para iniciarla, el texto intermedio y un>para cerrarla. Cabe destacar que si creamos una etiqueta debemos cerrarla debajo con en su misma línea de tabulación. Como se puede ver en el ejemplo de empleados el cierre es practicamente igual que el inicio pero incluimos un/luego de el simbolo de inicio<, el mismo texto y su símbolo de cierre> -
Atributos
Los atributos se incluyen dentro de las etiquetas y consisten en un nombre y un valor, en ejemplo puede ser el de empleado:
<empleado nombreAtributo="valorAtributo">
XSLT Es un lenguaje para transformar documentos XML en otros documentos XML o en otros tipos de documentos (HTML, texto plano, o en formato XSL-FO). No necesariamente transforma solo XML pero es lo más común. El documento de entrada ya sea el XML o alternativas (C, C++, Java, Python, Perl, Javascript) no se altera, sino que se crea un nuevo documento a partir de el. Cabe destacar que los navegadores webs más habituales (Safari, Chrome, Firefox, Microsoft Edge, Opera,...) llevan un procesador de XSLT incorporado.
En nuestro caso solo utilizamos XSLT a partir de XML, a continuacion se muestra una imagen de su funcionamiento
Antes de explicar los elementos de XSLT es importante enteder XPATH ya que lo usaremos en conjunto con los mismos. XPATH es un lenguaje que se utiliza para navegar por los elementos XML.
-
Define 7 tipos de nodos posibles:
- Nodo raíz
- Elementos
- Atributos
- Text
- Espacio de nombres
- Comentarios
Ejemplo de XML para la siguiente explicación
<botiga>
<bluray>
<titol idioma=“català”>Avatar</titol>
<director>J. Cameron</director>
<preu>21</preu>
<any>2009</any>
</bluray>
</botiga>| Expresión | Descripción |
|---|---|
| Nombre del nodo | Indica todos los hijos del nombre del nodo |
| / | Indica el elemento raíz |
| // | Indica todos los elementos del documento |
| . | Indica el nodo actual |
| .. | Indica el padre del nodo |
| @ | Indica el atributo |
Ejemplos sobre botiga con lo mencionado
| Expresión | Descripción |
|---|---|
| botiga | Indica todos los hijos del nombre de botiga |
| / | Indica el elemento botiga |
| botiga/bluray | Indica todos los elementos hijos de botiga que se llamen bluray |
| //bluray | Indica todos los elementos bluray del documento |
| botiga//bluray | Indica todos los elemento bluray descendientes de botiga |
| //@idioma | Indica todos los atributos idioma |
Volviendo a XSLT, para utilizarlo es necesario definir 2 líneas tanto en el XML que queremos leer como en el archivo de XSLT
Los archivos de XSLT tienen la extension .xsl
En el archivo XML hace falta:
-
<?xml version="1.0" encoding="UTF-8"?>Esta línea es la que ya hicimos mencion antes, en el apartado de XML -
<?xml-stylesheet type="text/xsl" href="/ruta/nombreFitcher.xsl"?>En este caso vinculamos el fichero XML al archivo de XSL con el cual haremos la transformacion a un nuevo documento
En el archivo XSL hace falta:
-
<?xml version="1.0" encoding="UTF-8"?>Esta línea es la que ya hicimos mencion antes, en el apartado de XML -
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> -
</xsl:stylesheet>
Estas lineas son para definir la hoja de estilos XSLT. Todo el contenido XSLT deberá ir dentro de estas líneas
<xsl:template>
El elemento xsl:template se utiliza para crear plantillas en conjunto con el atributo match. El valor del atributo es una expresion de XPath, por eso la importancia de entenderlo previamente. Por ejemplo match="/" define todo el documento y match=”/botiga” define a todos los elementos que hay dentro de botiga).
<xsl:value-of>
El elemento xsl:value-of se utiliza para extraer el valor de un nodo seleccionado. Se puede utilizar para extraer el valor de un elemento XML y añadirlo al flujo de salida de la transformación
<xsl:for-each>
El elemento xsl:for-each nos permite realizar bucles en XSLT. Se puede utilizar para seleccionar todos los elementos XML de un conjunto de nodos especificado.
<xsl:sort>
El elemento xsl:sort se añade después del xsl:for-each y nos da una salida de los datos ordenada.
<xsl:if>
El elemento xsl:if se añade después del xsl:for-each para poner una condición sobre el contenido del archivo XML.
<xsl:choose>
El elemento xsl:choose se utiliza junto a los elementos xsl:when y xsl:otherwise para obtener una condición múltiple.
<xsl:attribute>
El elemento xsl:attribute se utiliza junto con el nombre del atributo dentro de la misma etiqueta y en conjunto con xsl:value-of o texto normal para darle un valor a ese atributo. Ya que es un poco mas dificl de explciar con palabras a continuación un ejemplo de aplicación:
<img>
<xsl:attribute name="src">
<xsl:value-of select="/horari/@header" />
</xsl:attribute>
<xsl:attribute name="alt">imagen-header</xsl:attribute>
</img>En este caso estamos creando un atributo para un elemento img de un html, el nombre va a ser src y su valor va a ser el valor del atributo header que extraemos con value-of.