Tutorial XML DOM
DOM XML
¿Qué es el DOM?
El DOM define un estándar para acceder y manipular documentos:
El HTML DOM define una forma estándar para acceder y manipular documentos HTML. Presenta un documento HTML como una estructura de árbol.
El DOM XML define una forma estándar para acceder y manipular documentos XML. Presenta un documento XML como una estructura de árbol.
Comprender el DOM es imprescindible para cualquier persona que trabaje con HTML o XML.
El DOM HTML
Se puede acceder a todos los elementos HTML a través del HTML DOM.
Este ejemplo cambia el valor de un elemento HTML con id="demo":
Ejemplo
<h1 id="demo">This is a Heading</h1>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
Este ejemplo cambia el valor del primer elemento <h1> en un documento HTML:
Ejemplo
<h1>This is a Heading</h1>
<h1>This is a Heading</h1>
<script>
document.getElementsByTagName("h1")[0].innerHTML = "Hello World!";
</script>
Nota: incluso si el documento HTML contiene solo UN elemento <h1>, aún debe especificar el índice de matriz [0], porque el método getElementsByTagName() siempre devuelve una matriz.
Puede aprender mucho más sobre HTML DOM en nuestro tutorial de JavaScript .
El DOM XML
Se puede acceder a todos los elementos XML a través del XML DOM.
El DOM XML es:
- Un modelo de objeto estándar para XML
- Una interfaz de programación estándar para XML
- Independiente de la plataforma y el idioma
- Un estándar W3C
En otras palabras: XML DOM es un estándar sobre cómo obtener, cambiar, agregar o eliminar elementos XML.
Obtener el valor de un elemento XML
Este código recupera el valor de texto del primer elemento <title> en un documento XML:
Ejemplo
txt = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
Cargar un archivo XML
El archivo XML utilizado en los ejemplos siguientes es books.xml .
Este ejemplo lee "books.xml" en xmlDoc y recupera el valor de texto del primer elemento <title> en books.xml:
Ejemplo
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "books.xml", true);
xhttp.send();
function myFunction(xml) {
var xmlDoc = xml.responseXML;
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
}
</script>
</body>
</html>
Ejemplo explicado
- xmlDoc : el objeto DOM XML creado por el analizador.
- getElementsByTagName("title")[0] - obtiene el primer elemento <title>
- childNodes[0] - el primer hijo del elemento <title> (el nodo de texto)
- nodeValue - el valor del nodo (el texto mismo)
Cargando una cadena XML
Este ejemplo carga una cadena de texto en un objeto DOM XML y extrae la información con JavaScript:
Ejemplo
<html>
<body>
<p id="demo"></p>
<script>
var text, parser,
xmlDoc;
text = "<bookstore><book>" +
"<title>Everyday
Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</year>" +
"</book></bookstore>";
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
</script>
</body>
</html>
Interfaz de programación
El DOM modela XML como un conjunto de objetos de nodo. Se puede acceder a los nodos con JavaScript u otros lenguajes de programación. En este tutorial usamos JavaScript.
La interfaz de programación del DOM está definida por un conjunto de propiedades y métodos estándar.
A menudo se hace referencia a las propiedades como algo que es (es decir, el nombre de nodo es "libro").
A menudo se hace referencia a los métodos como algo que se hace (es decir, eliminar "libro").
Propiedades DOM XML
Estas son algunas propiedades típicas del DOM:
- x.nodeName - el nombre de x
- x.nodeValue - el valor de x
- x.parentNode - el nodo padre de x
- x.childNodes - los nodos secundarios de x
- x.attributes - los nodos de atributos de x
Nota: En la lista anterior, x es un objeto de nodo.
Métodos DOM XML
- x.getElementsByTagName( nombre ) - obtener todos los elementos con un nombre de etiqueta especificado
- x.appendChild ( nodo ): inserta un nodo secundario en x
- x.removeChild( nodo ) - elimina un nodo secundario de x
Nota: En la lista anterior, x es un objeto de nodo.